Dynamische Komponenten

In dieser Lektion lernen Sie, wie Sie Komponenten in Angular dynamisch laden, um flexible Anwendungen zu erstellen.

Was sind dynamische Komponenten?

Dynamische Komponenten werden zur Laufzeit in die Ansicht geladen, anstatt direkt in einer Vorlage deklariert zu werden.

Warum dynamische Komponenten verwenden?

• Flexible Darstellung der Benutzeroberfläche
• Komponenten bedingt anzeigen
• Dynamische Dashboards oder Modalfenster erstellen

Einen Platzhalter erstellen

Verwenden Sie <ng-container> als Platzhalter, um dynamische Komponenten zu laden:

<ng-container #dynamicContainer></ng-container>

ViewChild verwenden

Greifen Sie in der Komponentenklasse mit @ViewChild auf den Container zu:

@ViewChild('dynamicContainer', { read: ViewContainerRef }) container;

Komponenten dynamisch laden

Verwenden Sie den Component Factory Resolver, um Komponenten zu erstellen und einzufügen:

const componentRef = this.container.createComponent(MyDynamicComponent);

Dynamischen Komponenten Daten übergeben

Übergeben Sie Ihrer dynamisch erstellten Komponente Daten mithilfe von Inputs:

componentRef.instance.data = 'Hello Dynamic';

Dynamische Komponenten entfernen

Sie können dynamische Komponenten problemlos aus dem DOM entfernen:

this.container.clear();

Zusammenfassung

Sie wissen nun, wie Sie Komponenten in Angular dynamisch erstellen, verwalten und entfernen. Hervorragende Arbeit!