Angular7:动态生成模板
Angular 7: Dynamically generate template
我正在 angular 中完全重写我的网站 https://ixtutor.com/。我已经创建了几个在博客页面上呈现为小部件的组件。
例如,在博客 post https://ixtutor.com/tensorflow-basics-with-housing-prices-prediction-example-chapter-i/ 上,有像这样的小部件,
(i) 代码运行器小部件
(ii) 练习小部件
我正在将这些小部件建模为我的 angular 应用程序中的组件。
问题:我的应用程序中的一个页面是实时 html 编辑器,它允许作者编写 (angular) html 文本区域 T1 中的模板并并排查看(渲染的)视图。我还希望作者能够在他们创建的 html 中使用小部件组件。
这对常规 html 标签非常有效,我可以使用 div 的 innerHTML 属性 直接绑定 textarea T1 的 ngModel,但是,它不会'不适用于 angular 组件。
我看过 dynamic angular components,但我不知道如何在成熟的 html 模板中使用它。任何建议或建议将不胜感激。
谢谢。
Angular does not support inserting dynamic components in the template at runtime. It has to know at compile time which components will be inserted.
唯一的方法是使用 Angular elements 将您的 Angular 组件编译为 Web 组件,这样您就可以将它们作为自定义 HTML 元素插入到您的应用程序中。
为此,您必须在单独的库中开发它们。
我正在 angular 中完全重写我的网站 https://ixtutor.com/。我已经创建了几个在博客页面上呈现为小部件的组件。
例如,在博客 post https://ixtutor.com/tensorflow-basics-with-housing-prices-prediction-example-chapter-i/ 上,有像这样的小部件,
(i) 代码运行器小部件
我正在将这些小部件建模为我的 angular 应用程序中的组件。
问题:我的应用程序中的一个页面是实时 html 编辑器,它允许作者编写 (angular) html 文本区域 T1 中的模板并并排查看(渲染的)视图。我还希望作者能够在他们创建的 html 中使用小部件组件。
这对常规 html 标签非常有效,我可以使用 div 的 innerHTML 属性 直接绑定 textarea T1 的 ngModel,但是,它不会'不适用于 angular 组件。
我看过 dynamic angular components,但我不知道如何在成熟的 html 模板中使用它。任何建议或建议将不胜感激。
谢谢。
Angular does not support inserting dynamic components in the template at runtime. It has to know at compile time which components will be inserted.
唯一的方法是使用 Angular elements 将您的 Angular 组件编译为 Web 组件,这样您就可以将它们作为自定义 HTML 元素插入到您的应用程序中。
为此,您必须在单独的库中开发它们。