Angular2 动态模板或 ng-include答案

【问题标题】：Angular2 dynamic template or ng-includeAngular2 动态模板或 ng-include
【发布时间】：2017-01-12 16:25:04
【问题描述】：

有没有办法在 angular2 中动态加载模板？在 angular1 中，我使用 ng-include 在主控制器视图中加载不同的 html 模板。我知道 angular2 只能取 1 个 templateUrl 并且一直在 angular2 中搜索 ng-include 并且找不到任何参考。

【问题讨论】：

有 ngTemplateOutlet 但这听起来并不完全符合您的要求。另一种方法是在运行时编译组件。
你可以试试这个解决方案：stackoverflow.com/questions/33749994/…

标签： javascript angular

【解决方案1】：

多亏了选择器标签，当您可以将 html 作为自定义的新组件并在任何需要的地方使用它时，为什么还需要 ng-include。

例如：

    @Component({
      selector: 'app-my-component',
      templateUrl: './my-component.component.html'
  })

所以在这里，my-component.component.html 文件可以包含您想要在其他任何地方包含或显示的标记。并且选择器标签值<app-my-component></app-my-component> 可以在您的应用程序标记html文件中使用（您可以将其视为您的日常html标签-但本质上是高度定制的，并由角度框架首先解释为自定义标签，但使用角度构建） .

【讨论】：

我们尝试过这个东西，但是控制台错误提示标签没有正确结束。因为我们在 header.html 中添加了 html 开始标签，在 footer.html 中添加了结束标签
那么在你的 index.html 中你有类似 .... > <.. ..>
这个主意不错。我尝试为页眉和页脚制作两个单独的组件，并从页脚 HTML 中删除了

【解决方案2】：

不确定动态模板，但您可以插入动态组件（当然会有不同的模板）。

一个简单的例子，但不推荐使用可以在这里找到：Angular2: Insert a dynamic component as child of a container in the DOM

一个最新的例子，但更复杂的可以在这里找到：How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

【讨论】：