angular - 从字符串动态创建 Angular 组件

Question

我的目标是创建一种自动将 HTML 元素的任何给定字符串部分转换为自定义组件的方法。

例如，给定:

<p> Hello my name is #max </p>

我想创建这样的东西:

<p> Hello my name is <some-custom-component name="Max"></some-custom-component> </p>

然后将根据 some-custom-component 的模板呈现

我的主要问题是用 HTML 元素本身的所有额外内容包装自定义组件。我知道我可以使用 Angular Dynamic Component Loader 创建组件但我无法为其获取合适的 templateRef

理想的解决方案是:

1. 用户可以将我的指令附加到指定模式的任何 HTML 元素
2. 该指令扫描内容，用自定义组件替换任何出现的模式(静态或动态选择无关紧要)

有什么办法可以实现吗？

Answer 1

这很有趣。抱歉，我来晚了，因为你可能已经解决了它，但我写了一个非常适合你的用例的库，如果我看到这篇文章，我不会感到惊讶，不知何故得了失忆症，然后下意识地开始工作解决问题。

不管怎样，这个图书馆叫ngx-dynamic-hooks .尤其要查看“Writing your own HookParser”部分(如果出于某种原因，它仍然对您有用)。