为什么我们必须在angular2中动态加载组件时在容器中编写目标？

Question

我使用angular2（v2.2.4）构建我的网络应用程序。在这个应用程序中，我需要动态加载组件。我已经阅读了stackoverflow中的几乎所有相关答案，并发现了一个令人沮丧的事实：我们需要在容器中编写一个目标元素来加载我们的组件，如下所示：

<div #target></div>

然后我们在容器组件ts代码中使用它，如下所示：

@ViewChild('target', {read: ViewContainerRef}) vcRef: ViewContainerRef;

最后，动态加载的组件的容器在dom中有一个丑陋的附加元素<div _ngcontent-mbk-0></div>。

问题出现了：当我们在ts文件中静态编写所有组件时，为什么angular2不需要目标元素？我们有更好的解决方案吗？

Answer 1

Angular2旨在提前支持编译。 您在组件模板中写入的内容将生成JavaScript，这是有意义的。 对于动态添加的组件，Angular2需要一个锚点，它可以生成一些可用于放置动态组件的钩子。

Angular2的构建方式可以在HTML之外的其他技术上呈现，因此在需要从DOM中读取的地方添加了一些抽象。

Answer 2

根据文件 https://angular.io/docs/ts/latest/api/core/index/ViewContainerRef-class.html

  

要访问Element的ViewContainerRef，您可以放置​​一个   使用ViewContainerRef在Element上注入的指令，或者您获得   它通过ViewChild查询。

您还可以使用ng-container或template代替div来引用ViewContainerRef。 DOM

中没有这些标记