Dynamic Component in Angular (2024)

Summary

Dieses Videotutorial zeigt, wie man in Angular Komponenten dynamisch zur Laufzeit erstellt. Es wird gezeigt, wie man eine komplexe Komponente mit @inputs, @outputs und Content-Projection erstellt, verwaltet und zerstört. Der Fokus liegt auf der Verwendung der modernen signalbasierten API. Der Sprecher, Dmytro Mezhenskyi, erklärt, wie man Inputs aktualisiert, Outputs reagiert und Content projektiert, um fortschrittliche Angular-Entwickler zu werden.

Takeaways

• 😀 Angular-Komponenten können dynamisch zur Laufzeit erstellt werden, was für komplexe Anwendungsfälle nützlich ist.
• 🛠️ Um eine Komponente dynamisch zu erstellen, benötigen Sie den Konstruktor der Komponente und eine ViewContainer, in der sie platziert wird.
• 📦 ViewContainerRef bietet APIs, um Ansichten innerhalb des Containers zu manipulieren, einschließlich der Erstellung von eingebetteten Ansichten oder ganzer Komponenten.
• 🔄 Die Erstellung einer Komponente in der ViewContainer fügt standardmäßig neue Ansichten am Ende des Containers hinzu, was die Platzierung beeinflusst.
• 📍 Um die genaue Positionierung zu steuern, kann man eine eigene ViewContainer erstellen, die an einem bestimmten Punkt im Template platziert wird.
• 🔄 Die ViewContainer kann auch verwendet werden, um dynamisch erstellte Komponenten zu zerstören, indem man die clear()-Methode aufruft.
• 🔧 Um Eingaben (Inputs) in einer dynamisch erstellten Komponente zu aktualisieren, verwendet man die setInput()-Methode von componentRef.
• 📡 Um auf Ereignisse (Outputs) einer dynamisch erstellten Komponente zu reagieren, kann man sich an den Emitter-Property der Komponenteninstanz abonnieren.
• 📑 Content Projection ermöglicht es, bestimmte HTML-DOM-Knoten in spezifische Slots innerhalb einer Komponente zu projizieren, um diese konfigurierbarer und wiederverwendbarer zu machen.
• 🔄 Die projectableNodes-Eigenschaft in der Config-Objekt kann verwendet werden, um Content Projection bei der Erstellung einer dynamischen Komponente zu konfigurieren.
• 🔑 Die Verwendung von ViewChild() ermöglicht es, Referenzen auf DOM-Elemente oder Komponenten zu erhalten, die für die Verwendung in der Content Projection erforderlich sind.

Q & A

Wie kann man Angular-Komponenten zur Laufzeit dynamisch erstellen?

Man benötigt den Konstruktor der Komponente, die man erstellen möchte, und eine ViewContainer, in der die Komponente erstellt wird. Mit der Methode 'createComponent()' aus der ViewContainerRef kann man dann die Komponente dynamisch erstellen.

Was ist eine ViewContainer in Angular?

Eine ViewContainer ist ein Container, der als 'Box' oder Behälter für verschiedene Ansichten gedacht ist, die in der View gerendert werden müssen. Man kann eigene Container erstellen oder die von Angular automatisch erstellten wiederverwenden.

Wie kann man die ViewContainerRef in Angular injizieren?

Man kann die ViewContainerRef durch Dependency Injection injizieren, um auf die verschiedenen APIs zuzugreifen, die das Erstellen und Verwalten von Ansichten innerhalb des Containers ermöglichen.

Wo wird eine neue Ansicht standardmäßig in der ViewContainer hinzugefügt?

Standardmäßig wird eine neue Ansicht am Ende des Containers hinzugefügt. Das bedeutet, wenn die ViewContainerRef für die app-root-Komponente wiederverwendet wird, wird die neue WidgetComponent-Ansicht hinter der AppComponent-Ansicht gerendert.

Wie kann man die genaue Position für die Erstellung einer dynamischen Komponente angeben?

Man kann eine eigene ViewContainer erstellen und einen 'anchor'-Element definieren, an dem die neue Komponente gerendert werden soll. Dies kann ein beliebiges DOM-Element oder ein ng-container sein, um keine zusätzlichen DOM-Elemente zu erstellen.

Was passiert, wenn man die createComponent()-Methode mit demselben Komponenten-Konstruktor erneut aufruft?

Die vorherige Komponenteninstanz wird nicht zerstört, und man erhält mehrere Instanzen derselben Komponente. Um dies zu vermeiden, sollte man die clear()-Methode der ViewContainerRef aufrufen, bevor man die Komponente erneut erstellt.

Wie kann man eine dynamisch erstellte Komponente zerstören?

Man kann die destroy()-Methode des componentRef aufrufen, um die Komponente zu zerstören. Alternativ kann man die clear()-Methode der ViewContainerRef verwenden, um alle darin enthaltenen Ansichten zu entfernen.

Wie aktualisiert man die Inputs einer dynamisch erstellten Komponente?

Man verwendet die setInput()-Methode von componentRef, um die Inputs zu aktualisieren. Man muss den Namen des Inputs und den neuen Wert als Argumente an die Methode übergeben.

Was sind die Vor- und Nachteile des setInput() in Bezug auf Typsicherheit?

Das setInput() bietet eine einheitliche API für beide Arten von Inputs und respektiert Input-Aliasing. Der Nachteil ist, dass es aktuell nicht typsicher ist, was bedeutet, dass man beim Aufruf dieser Methode die richtigen Typen für die Inputs manuell sicherstellen muss.

Wie reagiert man auf Outputs einer dynamisch erstellten Komponente?

Man kann den Emitter-Property des Komponenten-Instanz auf die Output-Signale abonnieren und eine Callback-Funktion bereitstellen, die ausgeführt wird, wenn das Ereignis ausgelöst wird.

Was ist Content Projection und wie wird es in dynamischen Komponenten verwendet?

Content Projection ermöglicht das Projektion von bestimmten HTML-DOM-Knoten in spezifische Slots innerhalb einer Komponente, um diese konfigurierbarer und wiederverwendbarer zu machen. Bei dynamischen Komponenten wird dies durch das Angeben von projectableNodes in der Config-Objekt für die createComponent()-Methode erreicht.

Wie kann man Inhalte in ein bestimmtes Slot einer dynamisch erstellten Komponente projizieren?

Man kann Inhalte in ein ng-template einschließen und diese dann, wenn die dynamische Komponente erstellt wurde, aus dem Template heraus projizieren, indem man die createEmbeddedView()-Methode der ViewContainerRef verwendet.