angular - 如何以编程方式从字符串中渲染多个 Angular 7 组件？

Question

我目前有一个 Angular 7 应用程序作为无头 Wordpress 安装的前端。大多数 Wordpress 帖子在其正文中都包含预定义的 Angular 组件，并且在从 API 调用中获取帖子正文后，我在渲染帖子正文时遇到了麻烦。

我已经成功地使用了 JIT 编译器（通过从头开始动态编译新组件和模块），但是自从使用 --prod 标志构建后才发现这不适用于 AOT 编译器。

来自 Wordpress 的示例标记如下所示：

let apiData = '<p>A paragraph and <app-component-one></app-component-one>.</p>
<app-component-two someInput="test"></app-component-two>
<p>Another paragraph</p>';

现在我想要的是另一个组件，它可以接受这个字符串并正确地呈现其中的标记和组件。就像是：

<app-dynamic-content [content]="apiData"></app-dynamic-content>

在启用 AOT 的情况下，这样的事情甚至可能吗？

标签： angular

Answer 1

尝试<div [innerHTML]="apiData"></div>如果不适用于组件尝试指令。