Angular 2动态`模板变量名称为DynamicComponentLoader？

Question

TL; DR:

• 有效但不动态
• 动态但不起作用

说明:

我正在使用DynamicComponentLoader的loadIntoLocation()函数动态创建Angular 2组件.

插入由此函数生成的组件的位置由其anchorName参数确定,该参数除了传递 Template Variable Name(作为字符串)之外.

所以在他们<div #child></div>在模板中使用的示例中,然后传递'child'.哪个工作正常.

但是,我不想将生成的组件链接到具有硬编码到模板中的变量名称的元素,而是希望能够将它们附加到可变大小的列表中.

现在,NgFor页面显示您可以访问索引变量:<li *ng-for="#item of items; #i = index">...</li>.所以它会工作,如果我可以分配这个指标或类似,即使用的列表项等模板变量名#child1,#child2等等.

所以我倾向于尝试<div #{{foo}}></div>使用app变量foo "child".我在调试时遇到了麻烦,因为前端并没有在DOM中真正显示这些模板变量名,但似乎这种动态分配失败,导致错误"Could not find variable ...".

可能有办法做我想做的事吗？甚至可以template variable name从浏览器中查看已分配的s进行调试？

Answer 1

该方法的问题是您无法动态生成变量名称.

另一种可能的方法是使用loadAsRoot而不是使用变量名,使用id可以包含动态名称的名称.

// This will generate dynamically the id value
template: `
  <div *ng-for="#idx of data">
    <div id="dynamicid_{{idx}}">Dynamic</div>
  </div>`

然后设置要迭代的列表

this.data = [1,2,3,4,5,6];

for(var i = 0; i < this.data.length; i++) {
  // Third argument is the injector that I'm not using, so I just nulled it
  dynamicComponentLoader.loadAsRoot(DynamicComponent, '#dynamicid_'+this.data[i], null);
}

这是一个有例子的plnkr.

我希望它有所帮助.