ng-template ja ng-container
Määrittäkää ja isännöikää templaattifragmentteja
ng-template ja ng-container on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Templatet, joita ei renderöidä
<ng-template> määrittää merkkauslohkon, jota ei renderöidä, ennen kuin jokin nimenomaisesti instansioi sen. Se muodostaa rakenteellisten direktiivien, kuten *ngIf-direktiivin, perustan.
Templaten määrittäminen
<ng-template>-elementin sisältö pysyy passiivisena. Antakaa sille viitemuuttuja, jotta voitte käyttää sitä muualla.
<ng-template #empty>
<p>No items found.</p>
</ng-template>Renderöiminen ngTemplateOutletilla
Renderöikää template viitteen perusteella käyttämällä ngTemplateOutlet-direktiiviä.
<ng-container *ngTemplateOutlet="empty"></ng-container>
<ng-template #empty>
<p>No items found.</p>
</ng-template>Miksi ng-container?
<ng-container> on looginen, DOM:iin kuulumaton ryhmittelyelementti. Sen avulla voitte käyttää direktiivejä tai ryhmitellä nodeja lisäämättä DOM:iin ylimääräistä wrapper-elementtiä.
Wrapper-divien välttäminen
Ilman ng-container-elementtiä saatatte lisätä hyödyttömän <div>-elementin vain direktiivin isännäksi. ng-container poistuu renderöidystä tulosteesta.
<ng-container *ngIf="user">
<h2>{{ user.name }}</h2>
<p>{{ user.email }}</p>
</ng-container>Ohjausvirran ryhmittely
ng-container sopii hyvin uusien ohjausvirtalohkojen ympärille ilman muutoksia DOM:iin.
<ng-container *ngIf="ready">
@for (item of items; track item.id) {
<li>{{ item.name }}</li>
}
</ng-container>Templaten context
Templatet voivat vastaanottaa context-objektin, joka tuo arvoja saataville let--muuttujien kautta.
<ng-template #row let-name="name">
<p>{{ name }}</p>
</ng-template>
<ng-container
*ngTemplateOutlet="row; context: { name: 'Ada' }">
</ng-container>Contextin oletusarvo
Erityinen $implicit-context-arvo sitoutuu let--muuttujaan, jolle ei ole määritetty avainta.
<ng-template #item let-value>
<span>{{ value }}</span>
</ng-template>
<ng-container
*ngTemplateOutlet="item; context: { $implicit: 42 }">
</ng-container>Templatet ovat ensiluokkaisia arvoja
#ref <ng-template>-elementissä on TemplateRef. Voitte välittää sen @Input-arvona, jolloin komponentti antaa kuluttajille mahdollisuuden mukauttaa käyttöliittymänsä osia.
emptyTemplate = input<TemplateRef<unknown>>();ng-container isäntänä
ng-container on hyödyllinen myös dynaamisten komponenttien tai templaten outlet-isäntänä, jolloin DOM pysyy siistinä.
<ng-container *ngComponentOutlet="widgetComponent">
</ng-container>Milloin mitäkin käytetään
ng-template: viivästetty tai uudelleenkäytettävä merkkaus. ng-container: ryhmittely ja direktiivien isännöinti ilman ylimääräistä DOM:ia. Ne toimivat usein yhdessä.
Pikatesti
Testatkaa, miten hyvin ymmärrätte ng-template- ja ng-container-elementit.
Kertaus
Opitte, että <ng-template> sisältää passiivista, instansioitavaa merkkausta, joka renderöidään ngTemplateOutlet-direktiivillä (valinnaisen contextin kanssa), ja että <ng-container> ryhmittelee nodeja tai toimii direktiivien isäntänä lisäämättä DOM:iin uusia elementtejä.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 38
- Oppitunnit
- 144
Usein kysytyt kysymykset
Onko oppitunti ”ng-template ja ng-container” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “ng-template ja ng-container”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”ng-template ja ng-container”?
Määrittäkää ja isännöikää templaattifragmentteja Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”ng-template ja ng-container”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?
Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Sisällön projisointi yhteen paikkaan
- Sisällön projisointi useaan paikkaan select-valitsimella
- ng-template ja ng-container
- TemplateRef ja ViewContainerRef