TL; DR：
> works but not dynamic
> dynamic but doesn’t work
说明：
我使用DynamicComponentLoader的loadIntoLocation()函数动态创建Angular 2组件.
插入由此函数生成的组件的位置由其anchorName参数确定,除了您通过a
模板变量名称(作为字符串).
所以在这个例子中他们使用< div#child>< / div>在模板中,然后传递’小孩’.哪个工作正常
然而,我不想将生成的组件链接到具有硬编码到模板中的变量名称的元素,而是将其附加到可变大小的列表中.
现在,NgFor页面显示您可以访问索引变量：< li * ng-for =“#item of items; #i = index”> …< / li> ;.因此,如果我可以为列表项分配此索引等使用的模板变量名称,即#child1,#child2等,它将会起作用. 所以我想尝试< div#{{foo}}>< / div>应用程序变量foo为“小孩”.由于前端并没有在DOM中显示这些模板变量名称,因此我无法进行调试,但似乎此动态分配失败,导致错误“无法找到变量…”.
有没有办法做我想要的？甚至从浏览器中查看分配的模板变量名称进行调试？
这个方法的问题是你不能
dynamically generate variable names.
原文链接：https://www.f2er.com/angularjs/142796.html另一种可能的方法是使用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的一个例子.
我希望它有帮助.
