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

Question

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

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

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

会返回：

{ 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 }"
}

我的问题：

• （基于教程链接）我知道Angular允许提取数据对象并将其插入到预定义的html模板中。是否允许插入整个模板（整个HTML，而不仅仅是数据值）？
• 是否还允许使用自定义CSS？我知道css（或sass）被编译成Angular特有的“ thingy”-加载时可以做到吗？内联CSS怎么办？
• 如果有可能使用1st，它还会编译有角度的东西吗（例如app-image-component等应用定义的组件）？

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

我想做的事情得到很好的支持还是会变得非常复杂（有一些怪异的技巧）？

Answer 1

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

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

在build --prod和gzip之后，仅编译器下降到80kB以下。如果您打算拥有完全动态的页面，那么这是可以接受的。

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

请参阅“动态创建组件”

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通过编译器动态加载。

编辑

其他非常重要的链接：

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

Angular在编译（AOT）时会删除您的装饰器（与@一起的所有内容）。如果要为应用程序的JIT部分保留它们，则需要重新导出它们（使用的每个人）。基本上，您想通过将它们重新导出以防止angular剥离它们，然后将webpack从树中进行构建，从而将它们保存在AOT编译的所有位置，但将它们保留在子模块中（延迟加载），这将导致编译器无法编译它们（因为它需要它们）。