Komponenten dynamisch in ngFor hinzufügen

Ich habe ein "Dashboard", das konfigurierte Elemente lädt. Dashboard-Vorlage hat dies:Komponenten dynamisch in ngFor hinzufügen

<div class="dash-container" [ngGrid]="gridConfig"> 
    <div *ngFor="let box of boxes; let i = index" 
     [(ngGridItem)]="box.config" 
     (onItemChange)="updateItem(i, $event)" 
     (onResize)="onResize(i, $event)" 
     (onDrag)="onDrag(i, $event)" 
     (onDragStop)="onDragStop(i,$event)" 
     [ngClass]="box.class" 
    > 
     <div class="handle"><h4>{{box.title}}</h4></div> 
     <div [innerHTML]= "box.content"></div> 
    </div> 
    </div>

Jetzt wird <div [innerHTML]= "box.content"></div> nicht funktionieren, weil Nicht-Standard-Elemente hygienisiert erhalten. Laufende neueste Angular 2.4.6 (RC 6).

Ich schaue mir die Beispiele an, die ich für dynamische Komponenten finden könnte - aber alles, was ich sehe ist, dass sie nur Komponenten zur aktuellen Komponente hinzufügen - aber ich brauche sie in einer sehr spezifischen divs wie im obigen Beispiel.

ComponentFactoryResolver wird oft zusammen mit @ViewChild verwendet. Aber ich kann nicht einfach tun dies in einer Schleife:

ngAfterViewInit() { 
    const dashWidgetsConf = this.widgetConfigs(); 
    for (var i = 0; i < dashWidgetsConf.length; i++) { 
     const conf = dashWidgetsConf[i]; 

     @ViewChild(conf.id, {read: ViewContainerRef}) var widgetTarget: ViewContainerRef; 

     var widgetComponent = this.componentFactoryResolver.resolveComponentFactory(UnitsComponent); 
     widgetTarget.createComponent(widgetComponent); 
    } 
    }

Die @viewchild gibt ‚Zierer hier nicht gültig sind‘. Wie kann ich Komponenten aus einer Conf-Liste (in einer Schleife) laden und sie in einem bestimmten Div (Divs haben #{{conf.id}}) in meiner Komponente?

Quelle

2017-02-16 Agony

Sieht ähnlich wie http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-mit-user-click-chosen-components/36325468#36325468 mit Komponenten dynamisch erstellt wie in http gezeigt://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2/37044960#37044960 –

Aber in diesen Beispielen - das "Ziel" ist fest - bereits bekanntes Element definiert als @ViewChild am Anfang. Ich muss sie zu x Anzahl der Elemente mit ID-s hinzufügen, ich kann nicht in Vorlage vordefinieren. – Agony

Sie können alles in einer Vorlage einer Komponente vordefinieren, die zur Laufzeit erstellt wird, wie in der 2. Verknüpfung gezeigt - und ich meine, die gesamte Komponente wird zur Laufzeit erstellt, nicht nur dynamisch hinzugefügt. –

Nach ein paar Recherchen, das ist die Lösung, die ich kam (funktioniert in eckigen 4.0.0).

laden alle ViewContainerRef Ziele von id:

@ViewChildren('dynamic', {read: ViewContainerRef}) public widgetTargets: QueryList<ViewContainerRef>;

Dann über die Schleife sie das Ziel zu bekommen, erstellen Sie eine Fabrik für die Komponente und createComponent nennen.
Sie können die Komponentenreferenz auch verwenden, um andere Komponenteneigenschaften zu abonnieren oder festzulegen.

ngAfterViewInit() { 
    const dashWidgetsConf = this.widgetConfigs(); 
    const widgetComponents = this.widgetComponents(); 
    for (let i = 0; i < this.widgetTargets.toArray().length; i++) { 
     let conf = dashWidgetsConf[i]; 
     let component = widgetComponents[conf.id]; 
     if(component) { 
      let target = this.widgetTargets.toArray()[i]; 
      let widgetComponent = this.componentFactoryResolver.resolveComponentFactory(component); 
      let cmpRef: any = target.createComponent(widgetComponent); 

      if (cmpRef.instance.hasOwnProperty('title')) { 
       cmpRef.instance.title = conf.title; 
      } 
     } 
    } 
}

Die widgetComponents ist ein Objekt {key: component} und widgetConfigs ist, wo ich bestimmte Komponente Informationen speichern - wie Titel, Komponenten-ID usw.

dann in Vorlage:

<div *ngFor="let box of boxes; let i = index" > 
    <ng-template #dynamic></ng-template> 
</div>

und die Reihenfolge der Ziele ist das selbe wie in meinem conf (boxes wird von ihm erzeugt) - deshalb kann ich sie in der Reihenfolge durchlaufen und benutze ich als Index, um das korrekte conf und die Komponente zu erhalten.

Quelle

2017-03-28 07:27:34 Agony

Ausgezeichnet. Danke –

@Agony was ist, wenn sich der Wert von "Boxen" in Zukunft ändert? z.B. Neue Boxen werden den vorhandenen Boxen hinzugefügt. Ich konnte sehen, dass das DOM bei dynamisch geladenen Komponenten nicht mit den neuen Boxen aktualisiert wird. – Tejas

Komponenten dynamisch in ngFor hinzufügen

Antwort

Verwandte Themen