Alain Chautard
Apr 25, 2019 · 4 min read

ng-content is the directive used to achieve transclusion a.k.コンテンツプロジェクション

角度に切り替える前に角度JSを学んだ場合は、transclusionという用語に精通している可能性があります。 一方、transclusionが何であるかわからない場合は、Angularの新しい名前はcontent projectionであり、それがこの記事で説明するものです。

コンテンツプロジェクションは、DOMツリーの一部を親コンポーネントから子コンポーネントに渡すことで構成されます。

ダイアログ、モーダル、タブなどの再利用可能なコンポーネントを構築するのに最適です。次のように、そのコンテンツをポップアップに「渡す」ようにします。

<app-popup-window ="showPopup" title="Test pop-up"> This is the content of the pop-up (thanks to transclusion aka content projection)</app-popup-window>

タイトルをそのコンポーネントへの入力とし 今、デフォルトでは、上記のコードはコンテンツを投影しません。 コンテンツの投影を実現するには、子コンポーネントのテンプレートのどこかにng-contentディレクティブを追加する必要があります。

<div class="modalW-content">
<div class="modalW-header">
<h2>{{title}}</h2>
</div>
<div class="modalW-body">
<!-- Our content will be projected here -->
<ng-content></ng-content>
</div>
</div>

ng-contentはrouter-outlet: これは、動的コンテンツがどこにロードされるかを示すディレクティブです。

コンテンツの投影の周りに頭を包む別の方法は、基本的に親コンポーネントから生成されたHTMLを子コンポーネントのHTMLテンプレートに”カット&ペースト”し、htmlをng-contentがある場所に”貼り付け”することです。

上記のコードが配置されると、ポップアップは次のようにレンダリングされます:div>

あなたは見つけることができますこのstackblitzの例の完全なコード:

この投影されたコンテンツは動的にできますか?

もちろん、それはできます! 必要に応じて、任意のデータバインド、ディレクティブ、または他のコンポーネントを使用できます。ここに例があります:

<app-popup-window ="showPopup" title="Test pop-up">
This is the content of the pop-up.
{{customText}} <br>
I can even pass a child component: <br>
<app-hello></app-hello>
</app-popup-window>

これはすべて完全に正常に動作します:/div>

この2番目の例の完全なコードは、このstackblitzにあります。

異なる場所に複数のものを投影したい場合はどうすればよいですか?

私はあなたが尋ねてうれしいです。 これはマルチスロットコンテンツプロジェクションと呼ばれます。

ポップアップウィンドウを変更して、カスタムボディとカスタムフッターを渡すことができると仮定しましょう。p>

<div class="modalW-body">
<ng-content select="body"></ng-content>
</div><div class="modalW-footer">
<ng-content select="footer"></ng-content>
</div>

これらの特定のスロットにコンテンツを渡すためには、上記の選択基準に一致するタグを使用するだけです。

<app-popup-window ="showPopup" title="Test pop-up">
<body>
This is the body of the pop-up.
</body>
<footer>
<button (click)="showPopup = false">Close</button>
</footer>
</app-popup-window>

bodyとfooterは、その文脈で意味をなす実際のhtml要素であるため、私はbodyとfooterを使用しました。 しかし、CSSクラス、属性名、または好きなもので要素を選択することができます。 私がここでやったようにそれを正確に行う必要はありません。あなたが見ることができるように、それはうまく動作します:

私はこの最後の例の完全なコードは、このstackblitzで見つけることができます:

角度の助けが必要ですか?

話をするいくつかの時間をスケジュールしてみましょう。あなたがこの投稿を楽しんでいたら、それを拍手するか、それを共有してください。

あなたの助けは常に高く評価されます。p>

コメントを残す

メールアドレスが公開されることはありません。