TemplateRef ja ViewContainerRef
Renderöikää templaatteja dynaamisesti
TemplateRef ja ViewContainerRef on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/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.
Imperatiivinen renderöinti
Joskus sisältö täytyy renderöidä ohjelmallisesti deklaratiivisen tavan sijaan. Angular tarjoaa TemplateRef- ja ViewContainerRef-luokat tätä matalan tason hallintaa varten.
TemplateRef
TemplateRef on viite <ng-template>-elementtiin. Se edustaa merkkausta, jonka voitte instansioida myöhemmin.
tpl = viewChild.required<TemplateRef<unknown>>('tpl');ViewContainerRef
ViewContainerRef on sijainti DOM:ssa, johon voitte liittää näkymiä. Injektoikaa se hallitaksenne, mitä siinä renderöidään.
private vcr = inject(ViewContainerRef);createEmbeddedView
Yhdistäkää nämä kaksi: createEmbeddedView instansioi TemplateRefin ViewContainerRefiin.
this.vcr.createEmbeddedView(this.tpl());Contextin välittäminen
Voitte välittää toisena argumenttina context-objektin, joka on käytettävissä let--muuttujien kautta.
this.vcr.createEmbeddedView(this.tpl(), {
$implicit: 'Hello',
count: 3
});Näkymien tyhjentäminen
ViewContainerRef.clear() poistaa kaikki näkymät, jotka se on luonut. Näin dynaaminen sisältö voidaan ottaa käyttöön ja poistaa käytöstä.
this.vcr.clear();Mukautettu rakenteellinen direktiivi
Tämä malli mahdollistaa mukautetut rakenteelliset direktiivit. Direktiivi injektoi molemmat viitteet ja renderöi sisällön ehtojen mukaisesti.
@Directive({ selector: '[appUnless]' })
export class UnlessDirective {
private tpl = inject(TemplateRef<unknown>);
private vcr = inject(ViewContainerRef);
}Syötteen muutoksiin reagoiminen
Direktiivin syötteen setteri ohjaa create- ja clear-toimintoja, jolloin näkymä tulee näkyviin tai poistuu näkyvistä.
@Input() set appUnless(condition: boolean) {
if (!condition) {
this.vcr.createEmbeddedView(this.tpl);
} else {
this.vcr.clear();
}
}Lisääminen tiettyyn indeksiin
createEmbeddedView hyväksyy indeksin, jolla voitte hallita sisarnäkymien lisäysjärjestystä.
this.vcr.createEmbeddedView(this.tpl(), {}, 0);createComponent
ViewContainerRef voi myös instansioida komponentteja dynaamisesti createComponent-menetelmällä, joka on ComponentFactoryResolverin moderni korvaaja.
const ref = this.vcr.createComponent(WidgetComponent);
ref.setInput('title', 'Hi');Siivoaminen
Imperatiivisesti luodut näkymät on siivottava. Isäntäkomponentin tuhoaminen tyhjentää sen ViewContainerRefin automaattisesti, mutta kutsukaa clear()-menetelmää, kun vaihdatte sisältöä manuaalisesti.
Pikatesti
Testatkaa, miten hyvin ymmärrätte imperatiivisen renderöinnin.
Kertaus
Opitte, että TemplateRef on viite templaten merkkaukseen, ViewContainerRef on DOM:n lisäyspiste ja createEmbeddedView renderöi templaten toiseen. Yhdessä ne mahdollistavat mukautetut rakenteelliset direktiivit ja dynaamiset komponentit.
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 ”TemplateRef ja ViewContainerRef” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “TemplateRef ja ViewContainerRef”. 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 ”TemplateRef ja ViewContainerRef”?
Renderöikää templaatteja dynaamisesti 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 4/4.
Kuinka kauan ”TemplateRef ja ViewContainerRef”-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