javascript / expert
Snippet
Programmatische Komponenten-Orchestrierung via ViewContainerRef
Das dynamische Laden von Komponenten ermöglicht hochflexible Benutzeroberflächen, bei denen Komponenten zur Laufzeit basierend auf Logik statt auf Templates instanziiert werden. ViewContainerRef bietet die API zum Leeren von Containern und Injizieren neuer Komponenten, während die setInput-API (eingeführt in Angular 14) eine Signal-sichere Input-Bindung gewährleistet.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
@Directive({ selector: '[adHost]' })export class AdDirective {constructor(public viewContainerRef: ViewContainerRef) {}loadDynamicComponent(componentType: Type<any>, data: any) {this.viewContainerRef.clear();const componentRef = this.viewContainerRef.createComponent(componentType);componentRef.setInput('data', data);componentRef.instance.outputEmitter.subscribe(event => handle(event));}}
angular
Erklärung
1
this.viewContainerRef.clear();
Entfernt alle vorhandenen Komponenten oder Views aus diesem Container, um ein Stapeln zu verhindern.
2
this.viewContainerRef.createComponent(componentType);
Instanziiert die angegebene Komponentenklasse und fügt deren Host-View in diesen Container ein.
3
componentRef.setInput('data', data);
Setzt programmatisch eine @Input-Eigenschaft auf der dynamischen Komponenteninstanz auf eine Change-Detection-freundliche Weise.