Angular 4 – Dynamische Duplizierung von Komponenten

In Angular 4 werden einzelne Komponenten mit Typescript und dem dazugehörigen Template entwickelt.
Dabei kommt die Frage auf, wie man mit wenig Aufwand eine dieser Komponenten duplizieren kann ohne im dazugehörigen Template das HTML dafür zu schreiben.

Dazu wird in Angular der ComponentFactoryResolver verwendet. Der ComponentFactoryResolver erzeugt eine neue ComponentFactory für die übergebene Komponente.
Hierfür ist es nötig, die benötigte Komponente als „entryComponent“ zu deklarieren.

Dazu folgendes Beispiel, wie eine solche Komponente deklariert und eingebunden wird:

In der Komponente („YourComponent“) selbst sind, außer dem ComponentFactoryResolver, des Weiteren noch ein ViewContainerRef und der ReflectionInjector einzubinden.
Im Konstruktor müssen ComponentFactoryResolver und ViewContainerRef  ebenfalls angegeben werden, wodurch auf diese im Weiteren auf diese zurückgegriffen werden kann.

Aus der erzeugten ComponentFactory kann nun für die übergebene Komponente(„YourComponent“) in Zeile 16 ein ReflectionInjector erzeugt werden (Zeile 18). Dieser wird von der ComponentFactory verwendet, um ein neues Objekt vom Typ „YourComponent“ zu erzeugen (Zeile 19).

Jetzt müssen bei der neu erzeugten Komponente noch alle Attribute gesetzt werden.
Als Beispiel wird hier eine neue ID mit „_“ und einem Counter aus der Parent-Komponente erzeugt.
Für die weitere Verwendung, vor allem zum Löschen der erzeugten Komponente, ist es wichtig, die Parent-Komponente mit zu übergeben (Zeile 24).

Zum Schluss kann die Komponente mittels ViewContainerRef  zum Parent hinzugefügt werden.

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.