如何在Angular中动态加载具有特定TemplateUrl的组件

Question

我正在尝试构建一个可以在自定义html页面上工作的编辑器。所以我需要加载我的Angular自定义html代码。

我正在拼命寻找一种方法来加载每次使用不同TemplateUrl的组件。 我试图查看ComponentFactoryResolver或ngComponentOutlet，但徒劳无功。

我也尝试用innerHtml来做，但我的自定义代码不是由Angular编译的，所以这意味着没有指令不被绑定。

有没有人有解决方案？

我正在使用最新版本的Angular（4）。

Answer 1

有关角网站上有一篇很好的文章：

https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html

就是这样，组件的新声明的所有内容都保持不变，只需要在entryComponent中为在声明新组件的同一模块文件中添加的每个新组件创建一个额外的条目：

entryComponents: [ HeroJobAdComponent, HeroProfileComponent ],

然后使用ComponentFactoryResolver可以动态加载该组件。如果您需要进一步的帮助，请告诉我。

Answer 2

好的，我做到了。一切似乎都运作良好。

所以我使用compileModuleAndAllComponentsAsync（就像在这里完成的那样：https://github.com/patrikx3/angular-compile）。

为了使我的组件和指令在编译元素中可绑定，我只需在我创建的declarations的{​​{1}}中编译我的元素。

NgModule

谢谢大家！