TemplateRef og ViewContainerRef
Gjengi maler dynamisk.
TemplateRef og ViewContainerRef er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.
Imperativ rendring
Noen ganger må De rendre innhold programmatisk i stedet for deklarativt. Angular tilbyr TemplateRef og ViewContainerRef for denne lavnivåkontrollen.
TemplateRef
En TemplateRef er et håndtak til en <ng-template>. Den representerer markup som De kan opprette senere.
tpl = viewChild.required<TemplateRef<unknown>>('tpl');ViewContainerRef
En ViewContainerRef er et sted i DOM-en der De kan feste visninger. Injiser den for å kontrollere hva som rendres der.
private vcr = inject(ViewContainerRef);createEmbeddedView
Kombiner de to: createEmbeddedView oppretter en TemplateRef i en ViewContainerRef.
this.vcr.createEmbeddedView(this.tpl());Sende inn kontekst
De kan sende inn et kontekstobjekt som det andre argumentet. Det er tilgjengelig via let--variabler.
this.vcr.createEmbeddedView(this.tpl(), {
$implicit: 'Hello',
count: 3
});Tømme visninger
ViewContainerRef.clear() fjerner alle visningene den har opprettet. Slik slår De dynamisk innhold av og på.
this.vcr.clear();Et egendefinert strukturelt direktiv
Dette mønsteret driver egendefinerte strukturelle direktiver. Direktivet injiserer begge referansene og rendrer betinget.
@Directive({ selector: '[appUnless]' })
export class UnlessDirective {
private tpl = inject(TemplateRef<unknown>);
private vcr = inject(ViewContainerRef);
}Reagere på input
En setter på direktivets input styrer create/clear, slik at visningen vises eller forsvinner.
@Input() set appUnless(condition: boolean) {
if (!condition) {
this.vcr.createEmbeddedView(this.tpl);
} else {
this.vcr.clear();
}
}Sette inn på en indeks
createEmbeddedView godtar en indeks for å kontrollere innsettingsrekkefølgen blant søskenvisninger.
this.vcr.createEmbeddedView(this.tpl(), {}, 0);createComponent
ViewContainerRef kan også opprette komponenter dynamisk med createComponent, den moderne erstatteren for ComponentFactoryResolver.
const ref = this.vcr.createComponent(WidgetComponent);
ref.setInput('title', 'Hi');Rydde opp
Visninger som opprettes imperativt, må ryddes opp. Når vertskomponenten ødelegges, tømmes ViewContainerRef automatisk, men kall clear() når De veksler manuelt.
Hurtigsjekk
Test forståelsen Deres av imperativ rendring.
Oppsummering
De har lært at TemplateRef er et håndtak til markup i en mal, at ViewContainerRef er et innsettingspunkt i DOM-en, og at createEmbeddedView rendrer den ene i den andre. Sammen danner de grunnlaget for egendefinerte strukturelle direktiver og dynamiske komponenter.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 38
- Leksjoner
- 144
Ofte stilte spørsmål
Er leksjonen «TemplateRef og ViewContainerRef» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «TemplateRef og ViewContainerRef», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «TemplateRef og ViewContainerRef»?
Gjengi maler dynamisk. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Angular Academy?
Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «TemplateRef og ViewContainerRef»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?
Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Innholdsprojisering med én plass
- Projisering med flere plasser ved hjelp av select
- ng-template og ng-container
- TemplateRef og ViewContainerRef