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等，它就可以工作。

所以我倾向于使用app变量foo <div #{{foo}}></div>作为"child"。由于前端在DOM中没有真正显示这些模板变量名，因此我无法调试此问题，但似乎此动态分配失败，导致错误"Could not find variable ..."。

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

Answer 1

这种方法的问题是你不能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示例工作。

我希望它有所帮助。

Answer 2

在寻找类似答案后，我突然意识到默认解决方案实际上非常标准：提取一个组件，您可以在其中对模板变量进行硬编码，并根据需要生成此组件的尽可能多的实例{{ 1}}指令。

我理解可能会对性能产生担忧，而且我不太了解任何一种评论方式（谁知道，最终可能会更快），但IMO绝对应该是第一个被设想的解决方案。

在Eric Martinez的回答中提到的*ngFor似乎已经从Angular 5中消失了（无法在文档中找到它）。

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

2 个答案: