Angular komponents ir īpaša direktīva, un tā īpašā iezīme ir tā, ka tai ir sava veidne (html) un stils (css). Tāpēc, izmantojot komponentus, mūsu kods var būt ļoti atsaistīts, atkārtoti izmantojams un viegli paplašināms. Parastās sastāvdaļas ir definētas šādi:
demo.component.ts:
demo.component.html:
demo.component.scss:
Atsaucoties uz komponentu, tiek atveidots komponenta parsētais saturs:
Pieņemsim, ka komponentam ir jāpieņem ārēji projicēts saturs, kas nozīmē, ka komponents galu galā piedāvā vairāk nekā tikai to, ko tas definē. Šobrīd tiek uzaicināts šī raksta varonisng saturs。
Vienkārša projekcija
Sāksim ar vienkāršāko, pievienojiet modificēto demo.component.html un demo.component.scss demo.component.html šādi:
demo.component.html:
demo.component.scss:
Efekta labad konteinera fona krāsa ir apzināti definēta kā oranža.
Šajā brīdī mēs varam pārraidīt saturu no ārpuses, atsaucoties uz komponentu, un ārējais saturs tiks parādīts oranžajā apgabalā:
Mērķtiecīga prognoze
Ja vienlaicīgi ir vairāki, kā tiks projicēts ārējais saturs?
Vispirms apskatīsim piemēru, atšķirības labad es pievienoju zilu apgabalu, modificēto demo.component.html un demo.component.scss šādi:
demo.component.html:
demo.component.scss:
Lai atsauktos uz komponentu:
Šajā brīdī mēs redzēsim, ka ārējais saturs tiek projicēts zilajā zonā:
Protams, ja pēc zilā apgabala koda ievietojat oranžu apgabala kodu, tad ārējais saturs tiks projicēts oranžajā apgabalā:
Tātad no iepriekš minētā piemēra mēs varam redzēt, ka, ja ir arī vienkāršs , tad ārējais saturs tiks projicēts komponentu veidnes pēdējā daļā.
Tātad, zinot šo problēmu, mēs varam domāt, vai mēs varam mērķtiecīgi projicēt ārējo saturu? Atbilde acīmredzami ir jā.
Lai to risinātu, atbalstiet vienuAtlasietAtribūti, kas ļauj projicēt konkrētu saturu noteiktā vietā. Šis rekvizīts atbalsta CSS atlasītājus (tagu atlasītāju, klašu atlasītāju, atribūtu atlasītāju、... ), lai atbilstu vēlamajam. Ja ng-content nav iestatīts atlases atribūts, tas saņems pilnu saturu vai saturu, kas neatbilst nevienam citam ng-content elementam.
Aplūkojot tieši piemēru, modificētā demo.component.html un demo.component.scss ir šāda:
demo.component.html:
demo.component.scss:
Kā redzat no iepriekš minētā koda, zilais laukums saņems taga galvenes daļu, sarkanais laukums saņems div daļu ar klasi "demo2", zaļais laukums saņems div daļu ar īpašuma nosaukumu "demo3", un oranžais laukums saņems pārējo ārējo saturu (sākums, es esmu ārējās iegulšanas saturs, beigas).
Lai atsauktos uz komponentu:
Šajā brīdī mēs redzēsim ārējo saturu, kas projicēts norādītajā .
Paplašināt zināšanas
ngProjectAs
Tagad mēs zinām, ka ng-content atlases īpašība ļauj norādīt, ka ārējais saturs tiek projicēts noteiktā .
Lai pareizi projicētu saturu, pamatojoties uz atlases atribūtu, ir ierobežojums - neatkarīgi no tā, vai tā ir taga galvene, div ar klasi "demo2" vai div ar rekvizīta nosaukumu "demo3", šie tagi ir tiešie komponenta taga apakšmezgli.
Kas notiktu, ja tas nebūtu tiešs apakšmezgls? Vienkārši modificēsim kodu, kas atsaucas uz demonstrācijas komponentu, ievietojiet taga galveni div un modificēsim to šādi:
Šajā brīdī mēs redzam, ka satura cilnes galvenes daļa vairs netiek projicēta zilajā apgabalā, bet oranžajā apgabalā. Iemesls ir tāds, ka <ng-content select="header"></ng-content> nevar atbilst iepriekšējai taga galvenei, tāpēc šī satura daļa tiek projicēta oranžajā <ng-content></ng-content> apgabalā.
Lai atrisinātu šo problēmu, mums ir jāizmanto rekvizīts ngProjectAs, ko var piemērot jebkuram elementam. Sīkāka informācija ir šāda:
Iestatot rekvizītu ngProjectAs, div, kurā atrodas taga galvene, norāda uz select="header", un taga galvenes daļa tiek projicēta zilajā apgabalā:
<ng-content>Neģenerējiet saturu
Veiciet eksperimentu
Lai veiktu eksperimentu, vispirms definējiet demonstrācijas bērna komponenta komponentu:
demonstrācijas komponenta komponents:
Pēc tam demonstrācijas komponenta apraidē demo-child-component:
Šajā brīdī konsolē mēs redzam, ka demonstrācijas bērna komponenta inicializācija ir pabeigta! Šie vārdi. Bet, noklikšķinot uz pogas, lai pārslēgtu operācijas, demonstrācijas bērnu komponentu inicializācija ir pabeigta! Tas vairs netiek drukāts, kas nozīmē, ka mūsu demonstrācijas bērna komponents tiek instancēts tikai vienu reizi - nekad netiek iznīcināts un atjaunots.
Kāpēc tas notiek?
Notikuma cēloņi
<ng-content> Tas "neražo" saturu, tas tikai projicē esošo saturu. Jūs varat domāt par to kā līdzvērtīgu node.appendChild(el) vai $(node).append(el) metodei jQuery: izmantojot šīs metodes, mezgls netiek klonēts, tas vienkārši tiek pārvietots uz jauno atrašanās vietu. Tāpēc projicētā satura dzīves cikls būs saistīts ar vietu, kur tas ir deklarēts, nevis parādīts vietā.
Tas arī izskaidro iepriekšējo jautājumu no principa:Ja vienlaicīgi ir vairāki, kā tiks projicēts ārējais saturs?
Šī uzvedība tiek veikta divu iemeslu dēļ: konsekvence un veiktspēja. Ko nozīmē "vēlamā konsekvence", ka jūs kā izstrādātājs varat uzminēt savas lietojumprogrammas uzvedību, pamatojoties uz tās kodu. Pieņemsim, ka es uzrakstīju šādu kodu:
Acīmredzot demonstrācijas bērna komponenta komponents tiks instancēts vienu reizi, bet tagad, ja mēs izmantojam komponentu no trešās puses bibliotēkas:
Ja trešās puses bibliotēka kontrolē demonstrācijas bērna komponenta dzīves ciklu, man nebūs iespējas zināt, cik reižu tas ir instancēts. Vienīgais veids, kā to izdarīt, ir aplūkot trešo pušu bibliotēku kodu, lai izprastu to iekšējo apstrādes loģiku. Komponenta dzīves cikla saistīšana ar mūsu lietojumprogrammu komponentiem, nevis iesaiņojumiem, ir tāda, ka izstrādātāji var kontrolēt, ka skaitītāji tiek instancēti tikai vienu reizi, nezinot trešo pušu bibliotēku iekšējo kodu.
Veiktspējas iemesliir svarīgāks. Tā kā ng-saturs ir tikai kustīgs elements, to var izdarīt kompilācijas laikā, nevis izpildlaikā, kas ievērojami samazina faktiskās lietojumprogrammas darba slodzi.
Risinājums
Lai komponents varētu kontrolēt projicēto apakškomponentu instantiāciju, mēs to varam izdarīt divos veidos: izmantojot <ng-template> elementus un ngTemplateOutlets ap mūsu saturu vai izmantojot struktūras direktīvas ar "*" sintaksi. Vienkāršības labad piemērā izmantosim sintaksi <ng-template> .
demonstrācijas komponenta komponents:
Tad mēs iekļaujam demo-child-komponentu ng-template:
Šajā brīdī, noklikšķinot uz pogas, lai pārslēgtos, konsole izdrukāsdemo-bērna komponenta inicializācija pabeigta!Šie vārdi.
|
Publicēts 12.06.2019 10:14:39
|
|
|
|
Publicēts 14.06.2019 14:14:35