DynamicComponentLoader的Angular 2动态“模板变量名”？答案

【问题标题】：Angular 2 dynamic `template variable name`s for DynamicComponentLoader?DynamicComponentLoader的Angular 2动态“模板变量名”？
【发布时间】：2015-11-29 11:27:08
【问题描述】：

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> 与应用变量 foo 作为"child"。由于前端并未真正在 DOM 中显示这些模板变量名称，因此我在调试时遇到了麻烦，但似乎此动态分配失败，导致错误 "Could not find variable ..."。

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

【问题讨论】：

上面的两个链接都指向同一个不工作的例子 plunker
这里你有一个 example 使用 loadAsRoot 代替。
@GuenterGuckelsberger：现在修复它，谢谢。

标签： angular

【解决方案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 的示例。

希望对你有帮助。

【讨论】：

哈，太好了。我已经开始担心动态分配变量不会奏效，但我很高兴仍然有解决方案。谢谢！ :)
不客气！还有另一个solution，但它有点更复杂。
哈，我还没有看到那个帖子。我很确定我会坚持你的解决方案，但要整洁得多。 :D
后续：创建组件本身工作正常，但由于依赖注入异常，我无法使用有用的模板（涉及 NgFor，现在在孩子中）加载它们。我为那个问题创建了一个new question。
这在这个简单的示例中有效，但我看到的是，如果该项目具有其他内容，例如单击处理程序或 routerLinks，则这些内容不会使用 loadAsRoot 呈现。我只能用 loadIntoLocation 让它们加载。

【解决方案2】：

在四处寻找类似的答案后，我突然意识到默认解决方案实际上是非常标准的：提取一个组件，您可以在其中硬编码您的模板变量，并使用 @987654321 生成尽可能多的该组件实例@ 指令。

我知道可能存在对性能的担忧，但我对此了解的不够多，无法发表评论（谁知道呢，最终可能会更快），但 IMO 它绝对应该是第一个设想的解决方案。

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

【讨论】：