angular2中的动态组件和模板标记

Question

我希望有人熟悉ng2的动态组件和模板，能够帮助我解决一个不寻常的问题。我想知道如何使用ONLY AND EXCLUSIVELY TEMPLATE标记渲染动态创建的组件。例如：

我使用Angular的 ComponentResolver.resolveComponent 在 app-editor.component 中创建了所有动态组件（比如说FooBarComponent）。所以我有：

  

APP-editor.component.ts

public instances : Array<ComponentFactory>;

好的，到目前为止一切顺利。它按我想要的方式工作。组件的所有实例都按预期工作。每个人的模型都设置得恰到好处。

现在我需要在视图中显示其中两个组件实例。我该怎么办？

  

APP-editor.template.ts

<div>
    <foo-bar instance-index="2"></foo-bar>
    <foo-bar instance-index="15"></foo-bar>
</div>

请记住：我想使用专门的模板标记将实例连接到视图。我知道我可以在app-editor.component中使用 @ViewChild 并在app-editor.template中设置一个视图变量然后调用一些 loadIntoLocation | loadAsRoot 方法将组件插入到DOM中，但对我来说，它听起来像jQuery的做事方式，不是吗？