innerHtml和angular 5中的指令

问题描述 投票:3回答:1

我使用angular-font-awesome将包含<fa> <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>

OUTPUT:

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

尝试2:使用safeHtml pipe

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

OUTPUT:

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

问题仍然是没有转换<fa>标签,即<i>没有被angular-font-awesome插入。

在包含innerHtml之后,如何让angular-font-awesome再次运行?

angular
1个回答
1
投票

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

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

public applyFA: boolean = true;

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

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

© www.soinside.com 2019 - 2024. All rights reserved.