2017-12-21 4 views
2

<div [innerHtml]="fa-containing-content">を使用してangular-font-awesome<fa>というタグをHTMLファイルに含めることにしました。アンギュラ5のinnerHtmlと指令

私の問題は、faタグがiタグに変換されないため、アイコンが表示されないということです。私は、実際のアイコンにfaを変換するコードは、包含の後に実行されていないと思うが、それに対処する方法がわからない。

明らかにするには、角度フォントの素晴らしいものが私にとってはうまくいきます。この問題は、innerHtml経由で含まれるコンテンツの中にfaタグがある場合にのみ表示されます。

ATTEMPT 1:

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

OUTPUT:

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

ATTEMPT 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>がアンギュラフォント素晴らしいによって挿入されていない、変換されないことに変わりはありません。

innerHtmlがインクルードされた後で、これをもう一度実行するにはどうすればよいでしょうか?

答えて

0

残念ながら、html処理段階の後に角度成分を生成することはできません。 htmlは実行時に生成され、内部htmlインジェクションと同様に、コンポーネントはインジェクションされたことを決して検出しません。

たぶん、あなたは、少なくともその後、FAコンポーネントはテンプレートに正しく生成されなければならない。..

public applyFA: boolean = true; 

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

ような何かを試みることができます。