angular - Angular 5 中的 innerHtml 和指令

Question

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

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

需要说明的是，angular-font-awesome 对我来说效果很好。仅当我在通过 innerHtml 包含的内容中包含 fa 标签时才会出现此问题。

尝试 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>标记未转换，即 <i>没有被 angular-font-awesome 插入。

在包含 innerHtml 后，如何让 angular-font-awesome 再次运行它？

Answer 1

不幸的是，您无法在 html 处理阶段之后生成 Angular 组件。 html 是在运行时生成的，内部 html 注入(inject)也是如此，因此组件永远不会检测到它已被注入(inject)。

也许你可以尝试类似...

public applyFA: boolean = true;

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

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