angular - 在 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>将不起作用，因为非标准元素会被清理。运行最新的 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 给出“装饰器在这里无效”。我如何从 conf 列表(在循环中)加载组件并将它们添加到我的组件中的特定 div(div 得到 #{{conf.id}})？

Answer 1

经过一些研究，这是我想出的解决方案(适用于 angular 4.0.0)。

通过 id 加载所有 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 是我存储特定组件信息的地方——比如标题、组件 ID 等.

然后在模板中:

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

并且目标的顺序与我的 conf 中的顺序相同(boxes 是从它生成的)——这就是为什么我可以按顺序循环它们并使用 i 作为索引来获得正确的 conf和组件。