Dynamic Angular components in only 3 lines of code

interfacewerk Angular

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:

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 auslöst, die die Komponente dynamisch einfügt, indem sie 3 Zeilen Code ausführt:

Löschen des Containers

  1. Erstellen Sie ein sogenanntes Fabrikobjekt Ihrer Komponentenquelle

  2. Erstellen Sie eine Instanz des Factory-Objekts und injizieren Sie es in die Vorlage

  3. (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 *ngFor oder *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!

Veröffentlicht von Published by Felix Lemke on 2020-06-30 am 30.06.2020

Interesse geweckt? Entdecken Sie unsere Leistungen!