Динамическое добавление компонентов в ngFor

Question

У меня есть «приборная панель», которая загружает настроенные элементы. шаблон Приборная панель имеет следующее:

<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> 

Теперь <div [innerHTML]= "box.content"></div> не будет работать, потому что нестандартные элементы получают продезинфицировать. Запуск последнего углового 2.4.6 (RC 6).

Я смотрю примеры, которые я могу найти для динамических компонентов, но все, что я вижу, это то, что они просто добавляют компоненты к текущему компоненту, но мне нужны они в очень специфических div, как в приведенном выше примере.

ComponentFactoryResolver часто используется вместе с @ViewChild. Но я не могу просто сделать это в цикле:

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); 
    } 
    } 

@viewchild дает 'Декораторы не действуют здесь. Как я могу загрузить компоненты из списка conf (в цикле) и добавить их внутри определенного div (divs got #{{conf.id}}) в моем компоненте?

Answer 1

После некоторого исследования это решение, с которым я столкнулся (работает в угловом 4.0.0).

нагрузки все ViewContainerRef цели по идентификатору:

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

Тогда петля над ними, чтобы получить цель, создать фабрику для компонента и вызвать createComponent.
Также можно использовать ссылку на компонент, чтобы подписаться или установить другие свойства компонента.

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; 
      } 
     } 
    } 
} 

widgetComponents является объектом {key: component} и widgetConfigs где я хранить определенную информацию компонента - как название, компонент идентификатор и т.д.

Затем в шаблоне:

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

И порядок целей это то же самое, что и в моем conf (boxes). Именно поэтому я могу выполнить их цикл и использовать i в качестве индекса для получения правильного conf и компонента.