Angular 2 个用于 DynamicComponentLoader 的动态“模板变量名”？

Question

TL;DR:

解释：

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

这个函数生成的组件插入的位置是由它的anchorName参数决定的，除了你传递一个 Template Variable Name（作为字符串）。

因此在示例中，他们在模板中使用 <div #child></div>，然后传递 'child'。效果很好。

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

现在，NgFor 页面显示您可以访问索引变量：<li *ng-for="#item of items; #i = index">...</li>。因此，如果我可以为列表项分配此索引等上使用的模板变量名称，即 #child1、#child2 等

，它就会起作用

所以我倾向于尝试 <div #{{foo}}></div> 将应用程序变量 foo 作为 "child"。我在调试时遇到了问题，因为前端并没有真正在 DOM 中显示这些模板变量名称，但似乎这个动态分配失败了，导致错误 "Could not find variable ...".

有什么方法可以做我想做的事吗？或者甚至从浏览器查看分配的 template variable names 以进行调试？

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

在寻找类似的答案后，我突然意识到默认的解决方案实际上是非常标准的：提取一个组件，您可以在其中硬编码您的模板变量，并根据需要生成该组件的任意数量的实例*ngFor 指令。

我知道可能存在对性能的担忧，而且我对此了解不足，无法以任何一种方式发表评论（谁知道呢，它最终可能会更快），但在我看来，它绝对应该是第一个解决方案设想。

Eric Martinez 回答中提到的 DynamicComponentLoader 似乎从 Angular 5 中消失了（在文档中找不到）。

Angular 2 个用于 DynamicComponentLoader 的动态“模板变量名”？

Angular 2 dynamic `template variable name`s for DynamicComponentLoader?

angular