DynamicComponentLoader的Angular 2动态`模板变量名’？

发布时间：2020-12-17 07:41:20 所属栏目：安全来源：网络整理

导读：TL; DR： works but not dynamic dynamic but doesn’t work 说明：我使用DynamicComponentLoader的loadIntoLocation()函数动态创建Angular 2组件. 插入由此函数生成的组件的位置由其anchorName参数确定,除了您通过a 模板变量名称(作为字符串). 所以在这个

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&gt ;.因此,如果我可以为列表项分配此索引等使用的模板变量名称,即#child1,#child2等,它将会起作用. 所以我想尝试< div#{{foo}}>< / div>应用程序变量foo为“小孩”.由于前端并没有在DOM中显示这些模板变量名称,因此我无法进行调试,但似乎此动态分配失败,导致错误“无法找到变量…”.

有没有办法做我想要的？甚至从浏览器中查看分配的模板变量名称进行调试？

这个方法的问题是你不能 dynamically generate variable names.

另一种可能的方法是使用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的一个例子.

我希望它有帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!