I Angular är en komponent en specialdirektiv, och dess speciella egenskap är att den har sin egen mall (html) och stil (css). Därför kan användning av komponenter göra vår kod mycket frikopplad, återanvändbar och lätt utbyggbar. De vanliga komponenterna definieras enligt följande:
demo.component.ts:
demo.component.html:
demo.component.scss:
När vi refererar till komponenten renderas det parsade innehållet i komponenten:
Antag att det finns ett behov av att komponenten accepterar externt projicerad innehåll, vilket innebär att komponenten presenterar mer än bara det den definierar. Just nu är huvudpersonen i denna artikel inbjudenng-innehåll。
Enkel projektion
Låt oss börja med det enklaste, lägg till den modifierade demo.component.html och demo.component.scss till demo.component.html, enligt följande:
demo.component.html:
demo.component.scss:
För effektens skull definieras behållarens bakgrundsfärg medvetet som orange.
Vid denna punkt kan vi kasta innehåll utifrån när vi refererar till komponenten, och det externa innehållet visas i det orangea området:
Riktad projektion
Om det finns flera samtidigt, hur kommer det externa innehållet att projiceras?
Låt oss titta på ett exempel först, för att skilja åt lade jag till ett blått område, den modifierade demo.component.html och demo.component.scss enligt följande:
demo.component.html:
demo.component.scss:
För att referera till komponenten:
Vid denna punkt kommer vi att se att det externa innehållet projiceras till det blå området:
Självklart, om du sätter det orange riktnumret efter det blå, projiceras det externa innehållet till det orangea området:
Så från exemplet ovan kan vi se att om det också finns en enkel , så kommer det externa innehållet att projiceras i den sista i komponentmallen.
Så med tanke på detta problem kan vi undra, kan vi projicera externt innehåll på ett riktat sätt? Svaret är uppenbarligen ja.
För att hantera detta, stöd enutvaldAttribut som låter dig projicera specifikt innehåll på en specifik plats. Denna egenskap stöder CSS-väljare (taggväljare, klassväljare, attributväljare、... ) för att matcha det du vill ha. Om inget select-attribut är inställt på ng-content, kommer det att få hela innehållet, eller det innehåll som inte matchar något annat ng-content-element.
Om man tittar direkt på exemplet är de modifierade demo.component.html och demo.component.scss följande:
demo.component.html:
demo.component.scss:
Som du kan se från koden ovan, får det blå området den del av taggheadern, det röda området får delen av div:n med klass "demo2", det gröna området får delen av div:n med egendomsnamnet "demo3", och det orangea området får resten av det externa innehållet (start, jag är innehållet i den externa inbäddningen, slut).
För att referera till komponenten:
Vid denna punkt kommer vi att se det externa innehållet projicerat i den specificerade .
Utöka kunskapen
ngProjectAs
Nu vet vi att select-egenskapen ng-content tillåter dig att specificera att externt innehåll projiceras in i en given .
För att korrekt projicera innehåll baserat på select-attributet finns en begränsning – oavsett om det är en taggheader, en div med klassen "demo2" eller en div med egenskapsnamnet "demo3", är dessa taggar alla direkta undernoder till komponenttaggen.
Vad skulle hända om det inte vore för att vara en direkt subnod? Låt oss helt enkelt modifiera koden som refererar till demo-komponentkomponenten, lägga tagghuvudet i en div och ändra den enligt följande:
Vid det här laget ser vi att flikhuvuddelen av innehållet inte längre projiceras i det blå området, utan i det orangea området. Anledningen är att <ng-content select="header"></ng-content> inte kan matcha föregående taggheader, så denna del av innehållet projiceras till det <ng-content></ng-content> orangea området.
För att lösa detta problem måste vi använda egenskapen ngProjectAs, som kan tillämpas på vilket element som helst. Detaljerna är följande:
Genom att sätta egenskapen ngProjectAs pekar diven där tagghuvudet är placerat på select="header", och delen av tagghuvudet projiceras till det blå området:
<ng-content>Generera inte innehåll
Gör ett experiment
För att göra ett experiment, definiera först en demo-barn-komponent:
Demokomponent för att:
Sedan i demo-komponent cast demo-child-component:
Vid det här laget ser vi i konsolen att initieringen av demo-barn-komponenten är klar! Dessa ord. Men när vi klickar på knappen för att byta operation är initialiseringen av demo-barn-komponent klar! Den är inte längre tryckt, vilket innebär att vår demo-barn-komponentkomponent bara instansieras en gång – aldrig förstörs eller återskapas.
Varför händer detta?
Orsaker till förekomsten
<ng-content> Den "producerar" inte innehåll, den projicerar bara befintligt innehåll. Du kan tänka på det som motsvarighet till node.appendChild(el) eller $(node).append(el)-metoden i jQuery: med dessa metoder klonas inte noden, den flyttas helt enkelt till sin nya plats. Därför kommer livscykeln för projicerad innehåll att vara begränsad till där det deklareras, inte visas på plats.
Detta förklarar också den föregående frågan från principen:Om det finns flera samtidigt, hur kommer det externa innehållet att projiceras?
Detta beteende görs av två skäl: konsekvens och prestanda. Vad "önskad konsistens" betyder är att du som utvecklare kan gissa beteendet hos din applikation baserat på dess kod. Låt oss säga att jag skrev följande kod:
Självklart kommer demo-barn-komponentkomponenten att instansieras en gång, men nu om vi använder en komponent från ett tredjepartsbibliotek:
Om ett tredjepartsbibliotek har kontroll över livscykeln för en demo-barn-komponent, kommer jag inte ha något sätt att veta hur många gånger den har instansierats. Det enda sättet att göra detta är att titta på koden i tredjepartsbibliotek för att förstå deras interna bearbetningslogik. Innebörden av att koppla livscykeln för en komponent till våra applikationskomponenter istället för wrappers är att utvecklare kan kontrollera att räknare instansieras endast en gång, utan att känna till den interna koden för tredjepartsbibliotek.
Anledningar till prestationär viktigare. Eftersom ng-content bara är ett rörligt element kan det göras vid kompilering, inte vid körning, vilket kraftigt minskar arbetsbördan för själva applikationen.
Lösningslösning
För att komponenten ska kunna kontrollera instansieringen av de projicerade delkomponenterna kan vi göra detta på två sätt: genom att använda <ng-template> element och ngTemplateOutlets runt vårt innehåll, eller genom att använda strukturdirektiv med "*"-syntax. För enkelhetens skull använder vi Syntax i exemplet <ng-template> .
Demokomponent för att:
Sedan inkluderar vi demo-barn-komponent i ng-mallen:
Vid det här laget, när vi klickar på knappen för att byta, kommer konsolen att skrivas utDemo-barn-komponent initiering klar!Dessa ord.
|
Publicerad på 2019-06-12 10:14:39
|
|
|
|
Publicerad på 2019-06-14 14:14:35