javascript - Angular 检测和插入组件

Question

背景

我正在尝试使用 Angular (5) 创建一个博客。我正在使用 markdown 并将该数据存储在应用程序之外。它下载 markdown，将其解析为 html 字符串，然后绑定(bind)到 div 的 innerHTML。

我知道我正在违背原则，但我真的希望能够在这里创建一个优雅的解决方案。

问题

拥有使用自定义组件的能力使我们能够通过我们的博客做很多我们无法做的事情。注册组件、自定义小部件等。我们可以完成所有这些，并且仍然能够在应用程序外部单独存储内容。

未从 innerHTML 字符串中检测到自定义组件。这是不允许的。似乎DynamicComponentLoader曾经为此提供了解决方案，但现在不再了。

清晰度

我不想只渲染 html，或者只渲染单个组件。我想渲染 html 和所有包含的组件。

我也不关心它是否绑定(bind)到 innerHTML 属性，它似乎让我走得最远。如果有帮助的话，我可以/将使用解析器。

示例

https://stackblitz.com/edit/angular-wylp55

正如您所看到的，hello 组件在 html 中呈现，但不是组件本身。

如有任何帮助，我们将不胜感激。

Answer 1

所以我终于弄清楚了这一点并写了一篇文章。

这是更新后的堆栈 Blitz 的链接。

https://stackblitz.com/edit/angular-dynamic-html .

我还在我的公司博客上写了一篇完整的文章。 https://www.arka.com/blog/dynamically-generate-angular-components-from-external-html .