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

@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

this.vcr.createEmbeddedView(this.template, { $implicit: i });

Instanziiert das Template innerhalb des Containers und übergibt ein Kontextobjekt für die 'let-i="index"'-Syntax.

this.vcr.clear();

Entfernt alle vorhandenen Views aus dem Container, um Duplikate bei Eingabeänderungen zu verhindern.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Fortgeschrittene DOM-Orchestrierung mit strukturellen Direktiven

Verwandt