Angular Academy · Lektion

TemplateRef och ViewContainerRef

Rendera mallar dynamiskt.

Lektion 4 av 413 steg

TemplateRef och ViewContainerRef är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Imperativ rendering

Ibland måste ni rendera innehåll programmatiskt i stället för deklarativt. Angular tillhandahåller TemplateRef och ViewContainerRef för denna lågnivåkontroll.

TemplateRef

En TemplateRef är en referens till en <ng-template>. Den representerar markup som ni kan instansiera senare.

tpl = viewChild.required<TemplateRef<unknown>>('tpl');

ViewContainerRef

En ViewContainerRef är en plats i DOM där ni kan fästa vyer. Injicera den för att styra vad som renderas där.

private vcr = inject(ViewContainerRef);

createEmbeddedView

Kombinera de två: createEmbeddedView instansierar en TemplateRef i en ViewContainerRef.

this.vcr.createEmbeddedView(this.tpl());

Skicka kontext

Ni kan skicka ett kontextobjekt som det andra argumentet, vilket blir åtkomligt via let--variabler.

this.vcr.createEmbeddedView(this.tpl(), {
  $implicit: 'Hello',
  count: 3
});

Rensa vyer

ViewContainerRef.clear() tar bort alla vyer som den har skapat. Så växlar ni dynamiskt innehåll av och på.

this.vcr.clear();

Ett anpassat strukturdirektiv

Detta mönster ligger till grund för anpassade strukturdirektiv. Direktivet injicerar båda referenserna och renderar villkorligt.

@Directive({ selector: '[appUnless]' })
export class UnlessDirective {
  private tpl = inject(TemplateRef<unknown>);
  private vcr = inject(ViewContainerRef);
}

Reagera på indata

En setter för direktivets indata styr create/clear så att vyn visas eller döljs.

@Input() set appUnless(condition: boolean) {
  if (!condition) {
    this.vcr.createEmbeddedView(this.tpl);
  } else {
    this.vcr.clear();
  }
}

Infoga vid ett index

createEmbeddedView accepterar ett index för att styra infogningsordningen bland syskonvyer.

this.vcr.createEmbeddedView(this.tpl(), {}, 0);

createComponent

ViewContainerRef kan också instansiera komponenter dynamiskt med createComponent, den moderna ersättaren för ComponentFactoryResolver.

const ref = this.vcr.createComponent(WidgetComponent);
ref.setInput('title', 'Hi');

Rensa upp

Vyer som skapats imperativt måste rensas bort. När värdkomponenten förstörs rensas dess ViewContainerRef automatiskt, men anropa clear() när ni växlar manuellt.

Snabbtest

Testa er förståelse av imperativ rendering.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har lärt er att TemplateRef är en referens till markup i en mall, att ViewContainerRef är en infogningspunkt i DOM och att createEmbeddedView renderar den ena i den andra. Tillsammans utgör de grunden för anpassade strukturdirektiv och dynamiska komponenter.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”TemplateRef och ViewContainerRef” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”TemplateRef och ViewContainerRef”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”TemplateRef och ViewContainerRef”?

Rendera mallar dynamiskt. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”TemplateRef och ViewContainerRef”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy