Alain Chautard
Apr 25, 2019 · 4 min read

ng-content is the directive used to achieve transclusion a.k.en indholdsprojektion

Hvis du lærte Angular JS, før du skiftede til Angular, er du måske bekendt med udtrykket transclusion. På den anden side, hvis du ikke har nogen anelse om, hvad transclusion er, er det nye navn for det i Angular indholdsprojektion, og det er det, vi skal dække i dette indlæg.

indholdsprojektion består i at overføre en del af DOM-træet fra en overordnet komponent til en underordnet komponent.

det er perfekt at bygge genanvendelige komponenter såsom dialoger, modeller, faner og lignende.

Her er et eksempel, hvor jeg vil oprette et pop op-vindue med tilpasset indhold, og jeg vil gerne “videregive” dette indhold til pop op-vinduet som følger:

<app-popup-window ="showPopup" title="Test pop-up"> This is the content of the pop-up (thanks to transclusion aka content projection)</app-popup-window>

Bemærk, at jeg også sender en titel som input til den komponent. Som standard projicerer ovenstående kode ikke indholdet. For at få indholdsprojektion til at ske, skal vi tilføje ng-indholdsdirektivet et eller andet sted i skabelonen til barnekomponenten:

<div class="modalW-content">
<div class="modalW-header">
<h2>{{title}}</h2>
</div>
<div class="modalW-body">
<!-- Our content will be projected here -->
<ng-content></ng-content>
</div>
</div>

ng-indhold fungerer meget som router-outlet: Det er et direktiv, der angiver, hvor dynamisk indhold skal indlæses.

en anden måde at pakke dit hoved rundt om indholdsprojektion er, at det dybest set vil “klippe og indsætte” den genererede HTML fra forældrekomponenten i HTML-skabelonen for barnekomponenten, og at HTML vil blive “indsat”, hvor ng-indhold er placeret.

Når vi har ovenstående kode på plads, gengives pop op-vinduet som følger:

Du kan finde den fulde kode for at eksempel på dette Stackblitz:

Kan det forventede indhold være dynamisk?

selvfølgelig kan det! Du kan bruge alle databindinger, direktiver eller endda andre komponenter, hvis du vil.

Her er et eksempel:

<app-popup-window ="showPopup" title="Test pop-up">
This is the content of the pop-up.
{{customText}} <br>
I can even pass a child component: <br>
<app-hello></app-hello>
</app-popup-window>

og alt dette fungerer helt fint:

Den fulde kode for det andet eksempel kan findes i denne Stackblitz:

Hvad gør jeg hvis jeg ønsker at projektet flere ting i forskellige steder?

Jeg er glad for du spurgte. Dette kaldes multi-slot indhold projektion.

lad os antage, at vi vil ændre vores pop op-vindue, så vi kan videregive en brugerdefineret krop såvel som en brugerdefineret sidefod til den.

Vi skal bruge to direktiver om ng-indhold i den komponent, og nøglen er at få disse to slots til at vælge en bestemt del af det projicerede indhold ved hjælp af følgende syntaks:

<div class="modalW-body">
<ng-content select="body"></ng-content>
</div><div class="modalW-footer">
<ng-content select="footer"></ng-content>
</div>

nu for at videregive indhold til disse specifikke slots er alt, hvad jeg skal gøre, at bruge tags, der matcher udvælgelseskriterierne angivet ovenfor:

<app-popup-window ="showPopup" title="Test pop-up">
<body>
This is the body of the pop-up.
</body>
<footer>
<button (click)="showPopup = false">Close</button>
</footer>
</app-popup-window>

bemærk, at jeg brugte krop og sidefod, fordi de er faktiske HTML-elementer, der giver mening i den sammenhæng. Alligevel kan du vælge elementer efter CSS-klasse, attributnavn eller noget, du kan lide. Ingen grund til at gøre det præcis som jeg gjorde her.

som du kan se, fungerer det pænt:

div>

jeg anvendte en anden farve på sidefoden, så vi kan se, at indholdet blev transkluderet i den rigtige slot

den fulde kode til dette sidste eksempel kan findes i denne stackblits:

mit navn er Alain chautard. Jeg er Google Developer ekspert i Angular, samt stiftende konsulent og træner på Angular Training, hvor jeg hjælper udviklingshold lære og blive dygtige med Angular.

brug for hjælp til Angular? Lad os planlægge lidt tid til at tale.

Hvis du nød dette indlæg, skal du klappe for det eller dele det. Din hjælp er altid værdsat.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.