ContentChild

ContentChildはコンポーネント内に定義されたコンポーネントやディレクティブにアクセスするためのデコレーターです。

以下のサンプルではapp-rootコンポーネント内にchildコンポーネントを配置し、その内側にchild2ディレクティブとchild3ディレクティブを配置しています

childコンポーネントでは自身が定義された際の子要素(今回はchild2ディレクティブとchild3ディレクティブ)を@ContentChildで取得することができ、取得した情報にはAfterContentInitイベント終了後にアクセスできるようになります。

import {Component, ContentChild, Directive,AfterContentInit} from '@angular/core';
//child2
@Directive({
  selector: 'child2'
})
export class Child2 {
  foo:number=2;
}
//child3
@Directive({
  selector: 'child3'
})
export class Child3 {
  foo:number=3;
}
//child
@Component({
  selector: 'child',
  template: `Child`
})
export class Child implements AfterContentInit{
  @ContentChild(Child2) child2: Child2;
  @ContentChild(Child3) child3: Child3;
  ngAfterContentInit() {
    console.log(this.child2.foo);
    console.log(this.child3.foo);
  }
}
//app-root
@Component({
  selector: 'app-root',
  template: `
    <child>
      <child2></child2> 
      <child3></child3>
    </child>
  `,
})
export class AppRoot{}

複数のContentChildを取得する際にはContentChildrenを利用します。

参考URL

ContentChild decorator - Angular

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

Angularリファレンス

ContentChild

参考URL

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

検索

スポンサードリンク

バージョン

リファレンス