ng-content

ng-contentはContentChildrenを取得して表示する為のディレクティブです。

<ng-content></ng-content>といった具合に@Componentで定義するテンプレート内に記述することでContentChildrenを取得して表示することができます。

@Component({
  selector: 'app',
  template: '<ng-content></ng-content>',
});

ContentChildrenは以下のようにコンポーネントを利用する際にコンポーネントの内側に定義することができます。(下記の例だと「Hello World!」)

<app>
Hello World!
</app>

ContentChildrenの特定の要素を取得して表示したい場合は、select属性にCSSセレクタを利用して要素を絞り込むことができます。

@Component({
  selector: 'app',
  template: `
  <ng-content select=".s1"></ng-content>
  <hr>
  <ng-content select=".s2"></ng-content>
  `,
});

<app>
   <span class="s1">Hello</span>
   <span class="s2">World!</span>
</app>

登録日 : 2017年02月01日最終更新日 : 2017年5月5日

Angularリファレンス

ng-content

同じカテゴリー(@angular/common)のエントリー

検索

スポンサードリンク

バージョン

リファレンス