html - Angular 7 : Dynamically generate template

标签 html angular angular7 angular-template

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

例如,在博客文章中 https://ixtutor.com/tensorflow-basics-with-housing-prices-prediction-example-chapter-i/ ,有像这样的小部件, (i) 代码运行器小部件 (ii) 练习小部件 enter image description here

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

问题:我的应用程序中的一个页面是一个实时 html 编辑器,它允许作者在文本区域 T1 中编写( Angular )html 模板并查看(呈现的) View 端 -旁边。我还希望作者能够在他们创建的 html 中使用小部件组件。

这对常规 html 标签非常有效,我可以在其中使用 div 的 innerHTML 属性直接绑定(bind)文本区域 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 元素插入到您的应用程序中。

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

关于html - Angular 7 : Dynamically generate template,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54718786/

相关文章:

jquery - 在 href 标签内使用 jQuery

angular - 删除方法中的 HTTP 错误无法正常工作

javascript - 为什么悬停不能处理 jqgrid 中的彩色行

javascript - XSLT 和 XML 内容未在 Microsoft Edge 和 Internet Explorer 浏览器中加载问题

JavaScript 正则表达式将 DIV 与特定类相匹配

angular - 使用 RxJS 和 Angular2 限制并发 http 请求

angular - 'ion-title' 不是已知元素 : while creating components on the fly

angular - 有没有一种新方法可以使用 AngularFire 7 导入 @angular/fire 模块?

Angular Material 对话框 - 将类型传递到对话框组件中

Angular 7 : How to access query string in URL from an iframe?