In Angular is een component een speciale richtlijn, en het bijzondere kenmerk is dat het een eigen sjabloon (html) en stijl (css) heeft. Daarom kan het gebruik van componenten onze code sterk loskoppelen, herbruikbaar en gemakkelijk uitbreidbaar maken. De gebruikelijke componenten worden als volgt gedefinieerd:
demo.component.ts:
demo.component.html:
demo.component.scss:
Wanneer we naar de component verwijzen, wordt de geparseerde inhoud van de component gerenderd:
Stel dat er behoefte is aan de component om extern geprojecteerde inhoud te accepteren, wat betekent dat de component uiteindelijk meer presenteert dan alleen wat het definieert. Op dit moment is de hoofdpersoon van dit artikel uitgenodigdng-inhoud。
Eenvoudige projectie
Laten we beginnen met het eenvoudigste: voeg de aangepaste demo.component.html en demo.component.scss toe aan demo.component.html, als volgt:
demo.component.html:
demo.component.scss:
Voor het effect wordt de achtergrondkleur van de container bewust als oranje gedefinieerd.
Op dit punt kunnen we content van buitenaf casten bij het refereren naar de component, en de externe content wordt weergegeven in het oranje gebied:
Gerichte projectie
Als er meerdere tegelijk zijn, hoe wordt de externe inhoud dan geprojecteerd?
Laten we eerst naar een voorbeeld kijken: ter duidelijkheid heb ik een blauw gebied toegevoegd, de aangepaste demo.component.html en demo.component.scss als volgt:
demo.component.html:
demo.component.scss:
Om naar de component te verwijzen:
Op dit punt zien we dat de externe inhoud wordt geprojecteerd op het blauwe gebied:
Natuurlijk, als je het oranje netnummer achter het blauwe netnummer zet, wordt de externe inhoud geprojecteerd naar het oranje gebied:
Uit het bovenstaande voorbeeld zien we dat als er ook een eenvoudige is, de externe inhoud wordt geprojecteerd in de laatste van het componenttemplate.
Dus met dit probleem kunnen we ons afvragen: kunnen we externe content op een gerichte manier projecteren? Het antwoord is natuurlijk ja.
Om hiermee om te gaan, steun éénselecterenAttributen waarmee je specifieke content op een specifieke plek kunt projecteren. Deze eigenschap ondersteunt CSS-selectors (tag selector, class selector, attribute selector、... ) om te passen bij wat je wilt. Als er geen select-attribuut op ng-content is ingesteld, ontvangt het de volledige content, of de content die niet overeenkomt met een ander ng-content-element.
Als je direct naar het voorbeeld kijkt, zijn de aangepaste demo.component.html en demo.component.scss als volgt:
demo.component.html:
demo.component.scss:
Zoals je kunt zien uit de bovenstaande code, ontvangt het blauwe gebied het deel van de tagheader, het rode gebied het deel van de div met klasse "demo2", het groene gebied het deel van de div met de eigendomsnaam "demo3", en het oranje gebied ontvangt de rest van de externe inhoud (start, ik ben de inhoud van de externe embed, einde).
Om naar de component te verwijzen:
Op dit punt zien we de externe inhoud geprojecteerd in de gespecificeerde .
Kennis uitbreiden
ngProjectAs
Nu weten we dat de select-eigenschap van ng-content je toestaat te specificeren dat externe content wordt geprojecteerd in een gegeven .
Om inhoud correct te projecteren op basis van het select-attribuut, is er een beperking - of het nu een tagheader is, een div met een klasse "demo2", of een div met de eigenschapsnaam "demo3", deze tags zijn allemaal directe subnodes van de componenttag.
Wat zou er gebeuren als het niet was voor het feit dat het een directe subknoop was? Laten we simpelweg de code aanpassen die naar de demo-component verwijst, de tagheader in een div plaatsen en deze als volgt aanpassen:
Op dit punt zien we dat het tab-headergedeelte van de inhoud niet langer in het blauwe gebied wordt geprojecteerd, maar in het oranje gebied. De reden is dat <ng-content select="header"></ng-content> niet kan overeenkomen met de vorige tagheader, dus dit deel van de content wordt geprojecteerd naar het <ng-content></ng-content> oranje gebied.
Om dit probleem op te lossen, moeten we de ngProjectAs-eigenschap gebruiken, die op elk element kan worden toegepast. De details zijn als volgt:
Door de ngProjectAs-eigenschap in te stellen, wijst de div waar de tagheader zich bevindt naar select="header", en wordt het deel van de tagheader geprojecteerd naar het blauwe gebied:
<ng-content>Genereer geen content
Doe een experiment
Om een experiment uit te voeren, definieer je eerst een demo-kind-componentcomponent:
Democomponentcomponent om:
Dan in demo-component cast demo-child-component:
Op dit punt zien we in de console dat de initialisatie van de demo-kind-component voltooid is! Deze woorden. Maar wanneer we op de knop klikken om van bewerking te wisselen, is de initialisatie van demo-kind-component voltooid! Het wordt niet meer geprint, wat betekent dat onze demo-kind-componentcomponent slechts één keer wordt geïnstantieerd - nooit vernietigd en opnieuw gemaakt.
Waarom gebeurt dit?
Oorzaken van het voorkomen
<ng-content> Het "produceert" geen content, het projecteert alleen bestaande content. Je kunt het zien als equivalent van node.appendChild(el) of de $(node).append(el) methode in jQuery: met deze methoden wordt de node niet gekloond, maar simpelweg naar zijn nieuwe locatie verplaatst. Daarom zal de levenscyclus van geprojecteerde content beperkt zijn tot de plek waar deze wordt aangegeven, niet op de plek worden weergegeven.
Dit verklaart ook de vorige vraag van het principe:Als er meerdere tegelijk zijn, hoe wordt de externe inhoud dan geprojecteerd?
Dit gedrag wordt om twee redenen gedaan: consistentie en prestaties. Wat "gewenste consistentie" betekent, is dat je als ontwikkelaar het gedrag van je applicatie kunt raden op basis van de code. Stel dat ik de volgende code schreef:
Natuurlijk wordt de demo-kind-componentcomponent één keer geïnstantieerd, maar als we nu een component uit een derdepartijbibliotheek gebruiken:
Als een bibliotheek van een derde partij controle heeft over de levenscyclus van een demo-kindcomponent, heb ik geen manier om te weten hoe vaak het is geïnstantieerd. De enige manier om dit te doen is door naar de code van derde-partij bibliotheken te kijken om hun interne verwerkingslogica te begrijpen. De betekenis van het koppelen van de levenscyclus van een component aan onze applicatiecomponenten in plaats van aan wrappers is dat ontwikkelaars kunnen bepalen dat tellers slechts één keer worden geïnstantieerd, zonder de interne code van derde-partijbibliotheken te kennen.
Redenen voor prestatiesis belangrijker. Omdat ng-content slechts een bewegend element is, kan dit tijdens compilering worden gedaan, niet tijdens runtime, wat de werklast van de daadwerkelijke applicatie aanzienlijk vermindert.
Workaround
Om de component de instantie van de geprojecteerde subcomponenten te laten beheersen, kunnen we dit op twee manieren doen: door <ng-template> elementen en ngTemplateOutlets rond onze content te gebruiken, of door structuurrichtlijnen met "*"-syntaxis. Voor de eenvoud gebruiken we syntaxis in het voorbeeld <ng-template> .
Democomponentcomponent om:
Vervolgens nemen we demo-kind-component op in ng-template:
Op dit punt, wanneer we op de knop klikken om te wisselen, print de console uitDemo-kind-component initialisatie voltooid!Deze woorden.
|
Geplaatst op 12-06-2019 10:14:39
|
|
|
|
Geplaatst op 14-06-2019 14:14:35