Question

我循环遍历一个度量列表，并且在每个循环内部都有一个按钮，可以单击该按钮以在循环的HTML内的特定div处呈现图形。该图是一个单独的组件，但我似乎无法弄清楚如何定位正确的HTML元素以加载图形组件。我首先创建了一个组件渲染函数，然后调用它：

loadMetricGraph(metric) {
  let selector = "[id=metricGraph-" + metric.id + "]";
  this.renderComponent(LineGraphHorizontalComponent, selector, metric.data);
}    

renderComponent(componentClass, selector, data) {
  return this.compiler
    .compileComponentAsync(componentClass)
    .then((factory:ComponentFactory<any>) => {
      let cmpRef:ComponentRef<any> =
        factory.create(this.injector, null, selector);
      cmpRef.instance.inputData = data;
      (<any>this.appRef)._loadComponent(cmpRef);
      return cmpRef;
    });
}

在循环中我有一个div，它将成为加载组件的目标，但是我仍然坚持如何将正确的选择器传递给renderComponent（）函数。我试图使用 id="graphData-{{ metric.id }}"然后是"[id=graphData-" + metric.id + "]"的选择器。我知道这不是正确的方法，但我不确定如何继续。

Answer 1

您无法动态添加HTML并获取为此HTML创建的组件或指令。如果要动态添加组件，则需要使用ViewContainerRef.createComonent。

请参阅Angular 2 dynamic tabs with user-click chosen components，了解如何使用帮助程序组件以声明方式执行此操作。

Angular 2 - 动态创建/注入组件到* ngFor循环

1 个答案: