2017-09-09 21 views
3

私は動的に私のhtmlコードにHTMLコードを配置したい、だから私は、次のコードを記述します。
ng-containerの内側HTML、角度4?

<ng-container [innerHTML]="buttonIcon"></ng-container> 

角度がinnerHTMLが、私は第三のhtmlを使用したくないng-container
のための有効な属性ではありませんと言いますタグは次のようになります。

<div [innerHTML]="buttonIcon"></div> 

どのようにタグを内部HTMLバインディングなしで挿入できますか?

+0

' Randy

+1

私はそれをテストしました、それは同じエラーをスローする –

+2

は、視覚効果がなく、innerHTMLを受け入れます – Vega

答えて

3

ng-containerは、HTMLにレンダリングされません、それは単なるstructural directiveです。

角度は、角度はDOMに入れていないので、スタイルやレイアウトに干渉しないグループ要素です。

したがって、htmlを入れる要素はありません。あなたはサブディビジョンで作業する必要があります。あなたの意見にサブディビジョンが必要ない場合は、おそらくng-containerdivに置き換えて、コンテナをまったく使用しないでください。

+1

あなたが追加することを提案しているので、 sサブディビジョン... –

+0

@eugen_sunicはい、私はまた理由を説明しました。 'ng-container'はDOMの一部ではないのでinnerHTML属性を持つことはできません。代わりにdivなどの別の要素を使用する必要があります。 – Blauhirn

+1

はい、しかし、余分なdivや、innerHTML属性にアクセスできる他のhtml要素があります。囲んでいる/あなたのHTMLを取り囲むことは望ましくありません。 –

2

あなたはngTemplateを使用することができます。

<ng-template #buttonIcon> 
    <div> Your html</div> 
</ng-template> 
<ng-container 
    *ngTemplateOutlet="buttonIcon"> 
</ng-container> 
+0

あなたはまだdivを使用しています... –