Angular 7：动态生成模板

Question

我正在完全用 angular 重写我的网站https://ixtutor.com/ 。 我创建了几个在博客页面上呈现为小部件的组件。

例如，在博客文章https://ixtutor.com/tensorflow-basics-with-housing-prices-prediction-example-chapter-i/ 上，有一些小部件，例如，（i）代码运行小部件 (ii) 练习小工具

我正在将这些小部件建模为我的 angular 应用程序中的组件。

问题：我的应用程序中的一个页面是一个实时 html 编辑器，它允许作者在 textarea T1 中编写（有角度的）html 模板并并排查看（渲染的）视图。 我还希望作者能够在他们创建的 html 中使用小部件组件。

这适用于常规 html 标签，我可以使用 div 的 innerHTML 属性直接绑定 textarea T1 的 ngModel，但是，它不适用于角度组件。

我看过动态角度组件，但我无法弄清楚如何在成熟的 html 模板中使用它。 任何建议或建议将不胜感激。

谢谢。

Answer 1

Angular 不支持在运行时在模板中插入动态组件。 它必须在编译时知道将插入哪些组件。

唯一的方法是使用Angular 元素将 Angular 组件编译为 Web 组件，这样，您就可以将它们作为自定义 HTML 元素插入到应用程序中。

为此，您必须在单独的库中开发它们。