一般的なHTMLをAngular 2コンポーネントに渡すにはどうすればよいですか？

私はちょうど私がこのような何か場合などの画像/ボタンにテキストから、何かを保持することができ、一般的なモーダル・コンポーネントにしたい：一般的なHTMLをAngular 2コンポーネントに渡すにはどうすればよいですか？

<div class="Modal"> 
    <div class="header"></div> 
    <div class="body">{{content}}</div> 
    <div class="footer"></div> 
</div>

を私は実際にコンテンツにHTMLを渡すことができませんよと、ただテキスト。親コンポーネントが必要なHTMLを渡すことができるようにコンポーネントを作成するにはどうすればよいですか？ n個のボタンをフッターに追加したい場合は、それぞれに独自のコールバックがあります。私はこれを行うべきであるより良い方法はありますか？あなたが探しているものを

出典

2016-08-22 user3715648

はng-content

<div class="Modal"> 
    <div class="header"></div> 
    <div class="body"> 
    <ng-content></ng-content> 
    </div> 
    <div class="footer"></div> 
</div>

であり、あなたがあなたのコンポーネントに直接任意のHTMLコンテンツを渡すことができます。ホープ、このことができます

<my-modal> 
    <<HTML content : this will be replaced in the ng-content area >> 
    </my-modal>

、あなたは以下のようにそれを使用することができ、あなたのコンポーネント名はmy-modalであると言うことができます！

出典

2016-08-22 18:58:41

ありがとうございました。私も[innerHTML]を発見しました。あなたが知っている他のアプローチよりも1つのアプローチに利点がありますか？ – user3715648

[innerHTML]がチェックされていない場合は、バインディングが有効かどうかを確認します。また、* ngForループのようにローカル変数を割り当てることができるかどうかを確認しますか？もしそうであれば、私は他のものと比べて何の利点も見ません。 –

'outerHTML'は、それを適用した要素を置き換えます。 'innerHTML'はそれを子として追加します。 –

一般的なHTMLをAngular 2コンポーネントに渡すにはどうすればよいですか？

答えて

関連する問題