Snippet

Benutzerdefinierte strukturelle Direktiven

Strukturelle Direktiven manipulieren das DOM-Layout, indem sie Elemente hinzufügen, entfernen oder verändern. Im Gegensatz zu Attribut-Direktiven verwenden sie ein TemplateRef, um den Inhalt des Elements zu erfassen, und ein ViewContainerRef, um zu steuern, wo dieser gerendert wird. Dieses Beispiel erzeugt eine Verzögerung, bevor der Inhalt angezeigt wird.

snippet.js

javascript

@Directive({
  selector: '[appDelay]',
  standalone: true
})
export class DelayDirective implements OnInit {
  @Input() appDelay!: number;
 
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}
 
  ngOnInit() {
    setTimeout(() => {
      this.viewContainer.createEmbeddedView(this.templateRef);
    }, this.appDelay);
  }
}

angular

Erklärung

private templateRef: TemplateRef<any>

Referenziert den HTML-Inhalt innerhalb des Elements, auf das die Direktive angewendet wird.

this.viewContainer.createEmbeddedView(...)

Rendert das erfasste Template programmatisch in das DOM.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Benutzerdefinierte strukturelle Direktiven

Verwandt