javascript / expert
Snippet
Fortgeschrittene DOM-Orchestrierung mit strukturellen Direktiven
Strukturelle Direktiven ermöglichen die direkte Manipulation des DOMs durch die Verwendung von `ViewContainerRef` (der Container, in dem die View gehostet wird) und `TemplateRef` (der HTML-Inhalt der Direktive). Durch manuelles Leeren und Erstellen eingebetteter Views können Sie eigene Kontrollflusslogiken implementieren, die sich exakt wie `*ngIf` oder `*ngFor` verhalten.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
@Directive({ selector: '[appExpertRepeat]', standalone: true })export class ExpertRepeatDirective {private vcr = inject(ViewContainerRef);private template = inject(TemplateRef);@Input() set appExpertRepeat(count: number) {this.vcr.clear();for (let i = 0; i < count; i++) {this.vcr.createEmbeddedView(this.template, { $implicit: i });}}}
angular
Erklärung
1
this.vcr.createEmbeddedView(this.template, { $implicit: i });
Instanziiert das Template innerhalb des Containers und übergibt ein Kontextobjekt für die 'let-i="index"'-Syntax.
2
this.vcr.clear();
Entfernt alle vorhandenen Views aus dem Container, um Duplikate bei Eingabeänderungen zu verhindern.