TemplateRef und ViewContainerRef
Templates dynamisch rendern
TemplateRef und ViewContainerRef ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Imperatives Rendern
Manchmal müssen Sie Inhalte programmgesteuert statt deklarativ rendern. Angular stellt für diese Low-Level-Steuerung TemplateRef und ViewContainerRef bereit.
TemplateRef
Eine TemplateRef ist eine Referenz auf ein <ng-template>. Sie repräsentiert Markup, das Sie später instanziieren können.
tpl = viewChild.required<TemplateRef<unknown>>('tpl');ViewContainerRef
Ein ViewContainerRef ist eine Position im DOM, an der Sie Views einfügen können. Injizieren Sie ihn, um zu steuern, was dort gerendert wird.
private vcr = inject(ViewContainerRef);createEmbeddedView
Kombinieren Sie beide: createEmbeddedView instanziiert eine TemplateRef in einem ViewContainerRef.
this.vcr.createEmbeddedView(this.tpl());Kontext übergeben
Sie können ein Kontextobjekt als zweites Argument übergeben, auf das über let--Variablen zugegriffen werden kann.
this.vcr.createEmbeddedView(this.tpl(), {
$implicit: 'Hello',
count: 3
});Views löschen
ViewContainerRef.clear() entfernt alle Views, die es erstellt hat. So schalten Sie dynamische Inhalte ein und aus.
this.vcr.clear();Eine benutzerdefinierte strukturelle Direktive
Dieses Muster bildet die Grundlage benutzerdefinierter struktureller Direktiven. Die Direktive injiziert beide Referenzen und rendert Inhalte bedingt.
@Directive({ selector: '[appUnless]' })
export class UnlessDirective {
private tpl = inject(TemplateRef<unknown>);
private vcr = inject(ViewContainerRef);
}Auf Input reagieren
Ein Setter für den Direktiven-Input steuert create/clear, sodass die View erscheint oder verschwindet.
@Input() set appUnless(condition: boolean) {
if (!condition) {
this.vcr.createEmbeddedView(this.tpl);
} else {
this.vcr.clear();
}
}An einem Index einfügen
createEmbeddedView akzeptiert einen Index, um die Einfügereihenfolge zwischen benachbarten Views zu steuern.
this.vcr.createEmbeddedView(this.tpl(), {}, 0);createComponent
ViewContainerRef kann mit createComponent auch Komponenten dynamisch instanziieren – als moderne Ablösung für ComponentFactoryResolver.
const ref = this.vcr.createComponent(WidgetComponent);
ref.setInput('title', 'Hi');Aufräumen
Imperativ erstellte Views müssen bereinigt werden. Beim Zerstören der Host-Komponente wird ihr ViewContainerRef automatisch geleert; beim manuellen Umschalten sollten Sie jedoch clear() aufrufen.
Kurze Überprüfung
Testen Sie Ihr Verständnis des imperativen Renderns.
Zusammenfassung
Sie haben gelernt, dass TemplateRef eine Referenz auf Vorlagen-Markup und ViewContainerRef eine DOM-Einfügeposition ist und dass createEmbeddedView eine Vorlage in diese Position rendert. Zusammen bilden sie die Grundlage benutzerdefinierter struktureller Direktiven und dynamischer Komponenten.
Häufig gestellte Fragen
Ist die Lektion „TemplateRef und ViewContainerRef“ kostenlos?
Ja — der vollständige Text von „TemplateRef und ViewContainerRef“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „TemplateRef und ViewContainerRef“?
Templates dynamisch rendern Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Angular Academy zu starten?
Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „TemplateRef und ViewContainerRef“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?
Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Content-Projektion in einen Slot
- Multi-Slot-Projektion mit select
- ng-template und ng-container
- TemplateRef und ViewContainerRef