从字符串动态创建 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”部分（如果出于某种原因，它仍然对您有用）。