Dynamische Angular Components in nur drei Zeilen Code

Als Mitwirkender an StackOverflow sehe ich sehr häufig Fragen im Zusammenhang mit dynamischen Komponenten in Angular. Obwohl die Angular-Dokumentation für dynamische Komponenten (meiner Meinung nach) wirklich gut ist und alles abdeckt, was ein Entwickler wissen muss, ist es auch schwer, alles im Detail zu verstehen. Besonders für Anfänger. Aus diesem Grund habe ich mich entschlossen, einen kurzen Artikel über die einfachste Lösung zu schreiben, die mir in den Sinn kommt. Dieser Artikel soll so minimalistisch wie möglich sein!

Und los geht's:

import { Component, VERSION, ComponentFactoryResolver, ViewChild, ElementRef, ViewContainerRef } from '@angular/core'; import { DynamicComponent } from './dynamic.component'; @Component({ selector: 'my-app', template: ` ` }) export class AppComponent { @ViewChild('dynamic', {read: ViewContainerRef}) private viewRef: ViewContainerRef; constructor(private cfr: ComponentFactoryResolver) {} loadComponent() { this.viewRef.clear(); const componentFactory = this.cfr.resolveComponentFactory(DynamicComponent); const componentRef = this.viewRef.createComponent(componentFactory); } }

Gehen wir ihn Schritt für Schritt durch. Zuerst erstellen wir eine Referenz auf den Container innerhalb unserer Komponentenklasse. Dies ist gängige Praxis, und die meisten Angular-Entwickler sind sehr wahrscheinlich damit vertraut. Es geschieht in Zeile 12. Zusätzlich zu der Referenz auf die Vorlage müssen wir den

ComponentFactoryResolver

injizieren. Diese Klasse stellt eine Funktion namens

resolveComponentFactory

zur Verfügung, die zur Analyse der Komponentenquelle erforderlich ist. In der Schablone haben wir auch einen Knopf, der eine Funktion

loadComponent

tauslöst, die die Komponente dynamisch einfügt, indem sie 3 Zeilen Code ausführt:

Löschen des Containers

Erstellen Sie ein sogenanntes Fabrikobjekt Ihrer Komponentenquelle
Erstellen Sie eine Instanz des Factory-Objekts und injizieren Sie es in die Vorlage
(Optional) Sie können öffentliche Eigenschaften ändern oder öffentliche Funktionen der dynamisch erzeugten Komponente auslösen, indem Sie die componentRef nutzen.

Der Anwendungsfall für dynamische Komponenten ist sehr wahrscheinlich durch Strukturrichtlinien wie *ngForoder *ngIf abgedeckt. Man sollte zunächst darüber nachdenken, bevor man sich für den Ansatz der dynamischen Komponenten entscheidet. Der Grund dafür ist, dass er eine zusätzliche Schicht unnötiger Komplexität hinzufügt. In den meisten Fällen, auf die ich je gestoßen bin, sind strukturelle Richtlinien absolut durchführbar. Was passiert Ihrer Meinung nach, wenn Sie die Ausführung von

viewRef.clear()

entfernen? Bitte lassen Sie mich wissen, für welche Anwendungsfälle Sie dynamische Komponenten gegenüber Strukturrichtlinien bevorzugen. Oder hatten Sie ein Problem, bei dem strukturelle Richtlinien nicht durchführbar waren?

Wir bei interfacewerk bevorzugen einfache Lösungen für komplexe Probleme. Wenn Sie + Angular Herausforderungen haben, kontaktieren Sie uns gern!

Zum Download

<< Alle Posts

Minuten Lesezeit

Geschrieben von:

Felix

Dynamische Angular Components in nur drei Zeilen Code

Join our next webinar!

Mehr Posts

Meet Rawan

Die UX Checkliste