innerHtml和angular 5中的指令

Question

我使用<fa>将包含angular-font-awesome <div [innerHtml]="fa-containing-content">个标签的html内容包含到我的.html文件中。

我的问题是fa标签没有转换成i标签，因此没有显示图标。我怀疑将fa转换为实际图标的代码在包含之后不会运行，但我不知道如何解决它。

要清楚，angular-font-awesome对我来说没问题。只有在通过innerHtml包含的内容中包含fa标记时才会出现此问题。

ATTEMPT 1：

test: string ="<fa name='heart'></fa>"; <div class="test" [innerHtml]="test"></div>

输出：

<div _ngcontent-c1="" class="test"></div>

尝试2：使用safeHtml pipe

test: string ="<fa name='heart'></fa>"; <div class="test" [innerHtml]="test | safeHtml"></div>

输出：

<div _ngcontent-c1="" class="test"><fa name="heart"></fa></div>

问题仍然是<fa>标签未被转换，即{-1}}没有被angular-font-awesome插入。

如何在包含innerHtml后再次使用angular-font-awesome？

Answer 1

不幸的是，你不能在html处理阶段后生成一个角度分量。 html是在运行时生成的，就像内部html注入一样，因此组件永远不会检测到它已被注入。

也许你可以试试像......

public applyFA: boolean = true;

<div class="test"><fa *ngIf="applyFA" [name]="'heart'"></fa></div>

至少应该在模​​板中正确生成fa组件。