Alain Chautard
Apr 25, 2019 · 4 min read

ng-content is the directive used to achieve transclusion a.k.sisältöprojektio

Jos opit Angular JS: n ennen siirtymistä Angular: iin, saatat tuntea termin transkluusio. Toisaalta, jos sinulla ei ole aavistustakaan mitä transclusion on, uusi nimi sille Angular on content projection, ja se mitä aiomme kattaa tässä viestissä.

Sisältöprojektio koostuu DOM-puun osan siirtämisestä kantakomponentilta lapsikomponentille.

on täydellinen rakentaa uudelleenkäytettäviä komponentteja, kuten dialogeja, modaaleja, välilehtiä ja vastaavia.

tässä on esimerkki, jossa haluan luoda ponnahdusikkunan muokattavalla sisällöllä, ja haluaisin ”välittää” kyseisen sisällön ponnahdusikkunaan seuraavasti:

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

huomaa, että siirrän myös otsikon syötteenä kyseiseen komponenttiin. Nyt, oletuksena, yllä oleva koodi ei projisoida sisältöä. Jotta sisällönprojektio toteutuisi, on ng-sisältödirektiivi lisättävä jonnekin lapsikomponentin malliin:

<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-Sisältö toimii hyvin pitkälti router-Outletin tavoin: Se on direktiivi, joka kertoo, mihin dynaaminen sisältö ladataan.

toinen tapa kietoa pääsi sisällönprojektion ympärille on, että se on periaatteessa menossa ”leikkaamaan ja liittämään” syntyneen HTML: n vanhempakomponentista lapsikomponentin HTML-malliin ja että HTML aiotaan ”liittää”, jossa ng-sisältö sijaitsee.

kun Yllä oleva koodi on käytössä, ponnahdusikkuna muuttuu seuraavasti:

kyseisen esimerkin koko koodi löytyy tästä stackblitzistä:

voiko tämä projisoitu sisältö olla dynaaminen?

totta kai voi! Voit käyttää mitä tahansa tietojen sidoksia, direktiivejä tai jopa muita komponentteja, jos haluat.

tässä on esimerkki:

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

ja kaikki tämä toimii täydellisesti:

tämän toisen esimerkin koko koodi löytyy tästä stackblitzistä:

mitä jos haluan projisoida useita asioita eri paikkoihin?

olen iloinen, että kysyit. Tätä kutsutaan multi-slot sisällön projektio.

oletetaan, että haluamme muuttaa pop-up-ikkunaamme, jotta voimme siirtää sille muokatun rungon sekä mukautetun alatunnisteen.

aiomme käyttää kahta ng-sisältödirektiiviä kyseisessä komponentissa, ja avain on saada nämä kaksi paikkaa valitsemaan tietty osa projisoidusta sisällöstä seuraavalla syntaksilla:

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

nyt, jotta sisältö voidaan siirtää näihin tiettyihin lähtöihin, minun tarvitsee vain käyttää tägejä, jotka vastaavat yllä annettuja valintakriteereitä:

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

huomaa, että käytin vartaloa ja alatunnistetta, koska ne ovat todellisia HTML-elementtejä, joissa on järkeä siinä yhteydessä. Silti, voit valita elementtejä CSS luokan, määrite nimi, tai mitä haluat. Ei tarvitse tehdä niin kuin täällä.

kuten näette, se toimii hienosti:

div>

käytin alatunnisteeseen eri väriä, joten voimme nähdä, että sisältö oli transkludoitu oikeassa paikassa

koko koodi tälle lopulliselle esimerkille löytyy tästä stackblitzistä:

nimeni on alain chautard. Olen Google Developer Expert in Angular, sekä perustajakonsultti ja kouluttaja Angular Training, jossa autan kehitystiimejä oppimaan ja tulemaan taitaviksi Angular.

Tarvitsetko apua Kulmikkuuteen? Varataan aikaa jutella.

Jos tykkäsit tästä postauksesta, taputa sille tai jaa se. Apuasi arvostetaan aina.

Vastaa

Sähköpostiosoitettasi ei julkaista.