我可以动态加载 HTML 字符串作为组件模板并在 Angular 7 中完全编译它吗？

Question

所以我读了这个：https://angular.io/guide/dynamic-component-loader

我正在尝试从 i18n 数据库加载产品描述页面。让我们定义 REST 服务器，例如要求：

{ product: "stick", lang: "en" }

会 return:

{ content:
   "<div class="wrap">
        <h1>English translation title</h1>
        <span>Some text</span>
        <app-image-component some-component-bindings="..."></app-image-component>
    </div>"
  css:
   ".wrap { rules }"
}

我的问题：

（基于教程 link）我知道 Angular 允许拉取数据对象并将它们插入预定义的 html 模板。是否允许插入整个模板（整个 HTML，而不仅仅是数据值）？
是否也允许自定义 css？我知道 css（或 sass）被编译成 Angular-specific "thingy" - 这可以在加载时完成吗？内联 css 呢？
如果第一个是可能的 - 它是否也会编译 angular 东西（应用程序定义的组件，例如 app-image-component 在示例中）？

目标是让（应用程序的）管理员能够将产品内容页面放在一起，这些页面可以使用填充数据的预定义组件。

我正在尝试做的事情是否得到了很好的支持，还是会非常复杂（有一些奇怪的技巧）？

Answer 1

有可能并且仍然可以在生产版本中使用。

您可以构建整个应用程序 AOT，然后动态加载使用 angular 编译器库的模块。这使得应用程序的基础很小（你的应用程序 + 几 kB 来处理动态加载）并在需要时加载编译器，重量约为 300kB。

在 build --prod 和 gzip 之后，仅编译器就减少到不到 80kB。如果您计划拥有完全动态的页面，这是可以接受的。

我不会在这里写代码，但是：

见"Creating components on the fly"

https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e

小程序（动态模块需要优化）：

https://stackblitz.com/edit/mlc-app-init-zyns9l

4.hash.js 是用编译器动态加载的块。

编辑

额外非常重要link:

https://github.com/angular/angular-cli/issues/9306#issuecomment-435404174

Angular 在编译 (AOT) 时会丢弃你的装饰器（所有带@的东西）。如果您想为应用程序的 JIT 部分保留它们，则需要重新导出它们（您使用的每个人）。基本上你想把它们放在 AOT 编译的任何地方，但将它们保存在子模块（延迟加载）中，通过重新导出防止 angular 剥离它们，然后 webpack 从构建中对它们进行 treeshaking，这将导致编译器无法编译它们 JIT（因为它需要它们这样做）。

我可以动态加载 HTML 字符串作为组件模板并在 Angular 7 中完全编译它吗？

Can I dynamically load HTML string as a component template and fully compile it in Angular 7?

angular

angular7