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>

我正在对此进行转换，以获取所有锚点<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组件，并且整个工作只是由Pipe转换中包含的safeHTML解析的原始Angular。

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

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

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

上下文 包含新组件内部所需的所有依赖关系，例如，我在“角锚”中使用的第三项服务

从这一点上，我阅读了一些有关 Angular Elements 或 Dynamic Components Injector 的文档，但是我在应用程序中无法使用它。

是否有什么好的方法可以使用我刚才提到的这些方法或其他方法来使用AOT提供的自定义角度组件？

先谢谢了。如果需要，请问我更多细节。

Answer 1

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

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

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

如果这不起作用-尝试为您的html字符串添加html编码，然后尝试将其绑定-希望这可以解决您的第一个问题-编码愉快：）

将HTML字符串转换为Angular Components

1 个答案: