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，但是，它不适用于 angular 组件。

我查看了dynamic angular components，但我不知道如何在成熟的 html 模板中使用它。任何建议或建议将不胜感激。

谢谢。

Answer 1

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

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

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