渲染html元素字符串（在元素上使用自定义指令。）Angular 4.3+ with AOT

Question

我有来自后端的HTML元素字符串以及元素上的自定义指令。

例如：

str = "abc xyz <span [customDirective]='2'>qwerty</span> pqrs"

我希望将其呈现为HTML，以便customDirective加入行动。

我在没有-aot（只是ng serve）

的情况下使用了几个解决方案

但是没有使用-aot（ng serve -aot）或生产版本（ng build -prod）

1。使用[innerHTML]指令

  

正确呈现HTML字符串，但这清除了元素中的指令。

2。动态加载组件

I tried this well-explained solution 这没有-aot

但是当我使用-aot（或在生产版本中）运行时出现此错误：

  

“没有为RuntimeComponentModule找到NgModulele元数据”

3。以不同方式动态加载组件

I tried this another solution 这也没有-aot

但是当我使用-aot（或在生产版本中）运行时出现此错误：

  

未加载运行时编译器

4。尝试解决＃3

中的错误

为了解决这个问题，我以这种方式加载了编译器并用它来创建一个组件。

const compilerFactory: CompilerFactory =
            platformBrowserDynamic().injector.get(CompilerFactory);
this.compiler = compilerFactory.createCompiler([]);

这也没有-aot

使用-aot（或在生产版本中）运行时出现此错误：

  

已创建具有不同配置的平台。请先破坏它。

任何遇到类似问题的人请在这里提供帮助。

我也经历了Dynamic Component Loader 但这只会将数据动态传递给已定义的组件。

在这里，我希望使用动态模板动态创建组件，该模板是我从后端获取的字符串。