Alain Chautard
Apr 25, 2019 · 4 min read

ng-content is the directive used to achieve transclusion a.k.een contentprojectie

Als u Hoekige JS hebt geleerd voordat u naar hoekige overstapte, bent u misschien bekend met de term tranclusie. Aan de andere kant, als je geen idee hebt wat translusion is, de nieuwe naam voor het in Hoekige is content projection, en dat is wat we gaan behandelen in dit bericht.

Inhoudsprojectie bestaat uit het doorgeven van een deel van de Dom-boom van een oudercomponent naar een dochtercomponent.

Het is perfect om herbruikbare componenten zoals dialogen, modals, tabbladen en dergelijke te bouwen.

Hier is een voorbeeld waarin ik een pop-upvenster wil maken met aanpasbare inhoud, en ik zou die inhoud als volgt willen “doorgeven” aan de pop-up:

<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>

merk op dat ik ook een titel als invoer aan dat onderdeel doorgeef. Nu zou de bovenstaande code standaard de inhoud niet projecteren. Om contentprojectie mogelijk te maken, moeten we de ng-content directive ergens in het sjabloon van de dochtercomponent toevoegen:

<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-content werkt erg op router-outlet: Het is een richtlijn die aangeeft waar dynamische inhoud wordt geladen.

een andere manier om je hoofd rond contentprojectie te wikkelen is dat het in principe gaat “knippen en plakken” van de gegenereerde HTML van het bovenliggende component in de HTML-sjabloon van het onderliggende component en dat HTML wordt “geplakt” waar ng-content zich bevindt.

zodra we de bovenstaande code op zijn plaats hebben, wordt de pop-up als volgt weergegeven:

U vindt de volledige code voor dit voorbeeld in dit Stackblitz:

Kan dit geprojecteerde inhoud dynamisch?

natuurlijk kan het! U kunt alle gegevensbindingen, richtlijnen of zelfs andere componenten gebruiken als u dat wilt.

Hier is een voorbeeld:

<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>

en dit alles werkt perfect:

De volledige code voor dit tweede voorbeeld kan worden gevonden in dit Stackblitz:

Wat als ik wil-project meerdere dingen op verschillende plaatsen?

Ik ben blij dat je het vraagt. Dit heet multi-slot inhoud projectie.

laten we aannemen dat we ons pop-upvenster willen wijzigen zodat we een aangepaste body en een aangepaste voettekst kunnen doorgeven.

we gaan twee ng-content-richtlijnen gebruiken in die component, en de sleutel is om die twee slots een specifiek gedeelte van de geprojecteerde inhoud te laten selecteren met behulp van de volgende syntaxis:

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

om de inhoud door te geven aan deze specifieke slots, hoef ik alleen maar tags te gebruiken die voldoen aan de bovenstaande selectiecriteria:

<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>

merk op dat ik body en footer heb gebruikt omdat het echte HTML-elementen zijn die in die context zinvol zijn. Nog, je kon elementen selecteren op CSS-klasse, attribuutnaam, of wat je maar wilt. Je hoeft het niet precies te doen zoals ik het hier deed.

Zoals je kan zien, het werkt goed:

ik paste een andere kleur aan de voettekst, zodat we kunnen zien dat de inhoud was transcluded in de juiste sleuf

De volledige code voor dit laatste voorbeeld kan worden gevonden in dit Stackblitz:

Mijn naam is Alain Chautard. Ik ben een Google Developer Expert in hoekig, evenals de oprichting van consultant en trainer bij hoekige Training, waar ik de ontwikkeling teams te leren en bekwaam te worden met hoekig.

hulp nodig met hoekig? Laten we wat tijd inplannen om te praten.

als je dit bericht leuk vond, klap er dan voor of deel het. Uw hulp wordt altijd gewaardeerd.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.