角2动态`模板变量name`s为DynamicComponentLoader？ [英] Angular 2 dynamic `template variable name`s for DynamicComponentLoader?

问题描述

TL; DR：

• 作品，但不是动态


• 动态的，但不起作用

• works but not dynamic
• dynamic but doesn't work

说明：

我使用的是动态创建角2组件<一个href=\"https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html\">DynamicComponentLoader's loadIntoLocation（）函数。

I'm dynamically creating Angular 2 components using DynamicComponentLoader's loadIntoLocation() function.

插入这个函数生成的组件的位置是由它的 anchorName 参数，它节选你传递一个确定
模板变量名称（作为字符串）。

The place to insert the component generated by this function is determined by its anchorName parameter, which excepts you to pass a Template Variable Name (as a string).

因此​​，在他们使用的例子＆LT; D​​IV＃孩子＆GT;＆LT; / DIV＆GT; 模板，然后通过'孩子'。它工作得很好。

So in the example they use <div #child></div> in the template, then pass 'child'. Which works fine.

不过，而不必产生部件链接到与变量名的硬codeD插入模板元素，我想是可以的，比方说，他们追加到一个可变大小的列表。

However, rather than having to link generated components to an element with variable name hard-coded into the template, I'd like to be able to, say, append them to a variable-sized list.

现在， NgFor 页面显示您可以访问一个索引变量：＆LT;李·纳克换=项目＃项目;＃I =指数＆GT; ...＆LT; /李＆GT; 。所以它会工作，如果我能分配这个指标或类似，即＃child1 ，＃的child2 <使用列表项等模板变量名称/ code>等

Now, the NgFor page shows you have access to an index variable: <li *ng-for="#item of items; #i = index">...</li>. So it'd work if I could assign the list items such template variable names used on this index or the like, i.e. #child1, #child2, etc.

所以我倾向于尝试＆LT; D​​IV＃{{富}}＆GT;＆LT; / DIV＆GT; 与应用程序变量foo的如子。我有麻烦，因为前端并没有真正展现在DOM这些模板变量名调试，但它似乎这个动态分配失败，从而导致错误找不到变量。 ..。

So I'm inclined to try <div #{{foo}}></div> with an app variable foo as "child". I'm having trouble debugging this since the front-end doesn't really show these template variable names in the DOM, but it seems this dynamic assignment is failing, resulting in an error "Could not find variable ...".

那里可能没有办法做我想要什么？甚至要查看浏览器进行调试分配模板变量名称 S'

Might there be any way to do what I want? Or even to view assigned template variable names from the browser for debugging?

推荐答案

用这种方法的问题是你不能的动态生成的变量名的。

The problem with that approach is you can't dynamically generate variable names.

另一种可能的方法是使用<一个href=\"https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html\"><$c$c>loadAsRoot其中，而不是使用一个变量名，使用了一个 ID 可以包含一个动态的名称。

Another possible approach is using loadAsRoot which instead of using a variable name, uses an id which can contain a dynamic name.

// This will generate dynamically the id value
template: `
  <div *ng-for="#idx of data">
    <div id="dynamicid_{{idx}}">Dynamic</div>
  </div>`

然后，设置列表中要遍历

Then you set the list you want to iterate over

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 用一个例子来工作。

我希望它能帮助。

这篇关于角2动态`模板变量name`s为DynamicComponentLoader？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！