web-dev-qa-db-ja.com

コンポーネントタグ間でコンテンツをレンダリングする

コンポーネントがレンダリングされるとき、その中のコンテンツは無視されます、例えば：

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: '<div>{{title}}</div>',
})
export class AppComponent {
  title = 'app works!';
}

次のように使用します：

<app-root>Ignored content</app-root>

レンダリング：

<div>app works!</div>

しかし、PrimeNgダイアログを見ると、次のようなコンポーネントを使用しています。

<p-dialog [(visible)]="display">
    <p-header>
        Header content here
    </p-header>
    Content
    <p-footer>
        Footer content here
   </p-footer>
</p-dialog>

なので Header content here、ContentおよびFooter content hereはコンポーネント内にありますが、なぜ無視されないのですか？これを実現するにはどうすればよいですか？

angularshadow-dom
31
LeagueOfJava

コンテンツを投影するコンポーネントのテンプレートに<ng-content></ng-content>を追加します。

@Component({
  selector: 'app-root',
  template: '<div>{{title}}</div>
             <br>
             <ng-content></ng-content>',
})
export class AppComponent {
  title = 'app works!';
}

投影されるコンテンツ：

<app-root>This is projected content!</app-root>

出力は次のようになります。

app works!
This is projected content!

Angular Content Projection（Angular 1 Transclusion）に関する素晴らしい記事を次に示します： Transclusion with Angular 2 with ng-content

75
Seid Mehmedovic