将 HTML 字符串转换为 Angular 组件

Question

假设我们进行 API 调用并在字符串中获取一些 HTML DOM。内容以不带角度的 HTML 形式出现，因此我必须首先将其转换为我想要的 Angular，然后将其编译为 Angular。

示例 API 响应：

<div>
...some more html...
<h1>a header</h1>
...some more html...
<a href="somewhere.com" class="a-class" id="a-id">A Link</a>
...some more html...
</div>

我正在对其进行转换以获取所有 Anchors <a href="x"></a> 并将它们转换为具有输入和输出的角度组件注入父容器并一起解析，例如：

<angular-anchor   
  [href]="somewhere.com"
  [innerClass]="thisClasses"
  [innerID]="thisID" 
  [content]="thisContent">
</angular-anchor>

angular-anchor 包含一个 click 方法，该方法从这些组件外部但在 angular 内部（来自服务）执行代码。

通过在父容器中使用[innerHTML] 来完成转换，就像之前的管道一样：

<parent [innerHTML]="APIResponseHTML | transformAnchorsPipe"></parent>

不会加载内部的 Angular 组件，整个工作只是由管道转换中包含的 safeHTML 解析的原始 Angular。

为了解决这个问题，我使用了 ng-dynamic library，但它已经过时并且与 AOT 编译不兼容。尽管如此，我还是设法将它与 JIT 编译一起使用，但 这对生产不利，效率也低很多。

这种方法的例子，“parentDIV”是一个标准的 HTML 标签：

<parentDIV *dynamicComponent="APIResponseHTML | transformAnchorsPipe; 
    context: {dependency: dependencyName};">
</parentDIV>

context 包含新组件内部所需的所有依赖项，例如我在“angular-anchor”中使用的第三个服务

从那时起，我阅读了几篇关于 Angular Elements 或 Dynamic Components Injector 的文档，但我无法在我的应用程序中使用它。

有没有什么好的方法可以使用我刚才提到的这些方法或任何其他方法来使用我在 AOT 中可用的自定义角度组件？

提前致谢。如果需要，请向我询问更多详细信息。

Answer 1

如果parent 是一个组件，则<parent [innerHTML]="APIResponseHTML | transformAnchorsPipe"></parent> 内部html 不是parent 的已知属性

将您的 html 作为字符串传递给 parent 组件中的任何属性 - 您可以在属性上使用 @Input() 装饰器来实现 - 您可能对此有所了解

最后尝试将字符串作为内部 html 传递给parent.component.html 中的任何div 标记 - 我希望这将解析您的 html 字符串并将 html 附加到指定的 div 中

如果这不起作用 - 尝试为您的 html 字符串添加 html 编码，然后尝试绑定它 - 希望这将解决您的第一个问题 - 快乐编码:)