javascript-Angular 2-将组件动态创建/注入到* ngFor循环内的特定元素

我正在遍历一系列指标,并且在每个循环中都有一个按钮,可以单击该按钮以在循环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”]“的选择器.我知道这不是正确的方法,但是我不确定如何进行.

解决方法:

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

请参见Angular 2 dynamic tabs with user-click chosen components,其中显示了如何使用帮助程序组件以声明方式执行此操作.