在ngFor中动态添加组件(Dynamically adding components in ngFor)

 我有一个加载配置元素的“仪表板”。 仪表板模板有这样的： 
 
  <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>将不起作用，因为非标准元素会被清理。 运行最新的Angular 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给'装饰者在这里无效'。 我怎样才能从配置列表中加载组件（在一个循环中），并将它们添加到组件中的特定div（divs获得#{{conf.id}} ）？ 

I have a "dashboard" that loads configured elements. Dashboard template has this:
 
  <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>
 
Now <div [innerHTML]= "box.content"></div> will not work because non standard elements get sanitised. Running latest Angular 2.4.6 (RC 6).
 
I look at the examples i could find for dynamic components - but all i see is that they just add components to the current component - but i need them in a very specific divs like in the example above.
 
ComponentFactoryResolver is often used together with @ViewChild. But i can't just do this inside a loop:
 
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);
    }
  }
 
The @viewchild gives 'Decorators are not valid here'. How can i load components from a conf list (in a loop) and add them inside a specific div (divs got #{{conf.id}}) in my component?

原文：https://stackoverflow.com/questions/42274281