ContentChildren

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

取得した@ContentChildrenで取得したQueryListはContentChildの集合ですのでmapにより各コンポーネントにアクセスすることができます。

import {
  Component,
  Directive,
  AfterContentInit,
  ContentChildren,
  QueryList,
  Input
} from '@angular/core';
 
//child
@Directive({
  selector: 'child'
})
export class Child {
  @Input() no: String;
}
 
//wrap
@Component({
  selector: 'wrap',
  template: ``
})
export class Wrap implements AfterContentInit{
  @ContentChildren(Child)  children: QueryList<Child>;
  ngAfterContentInit() {
    console.log(this.children.length);
    this.children.map(child => {
      console.log(child.no);
    });
  }
}
 
//app-root
@Component({
  selector: 'app-root',
  template: `
    <wrap>
      <child no="1"></child> 
      <child no="2"></child>
    </wrap>
  `,
})
export class AppRoot{}

参考URL

ContentChildren decorator - Angular

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

Angularリファレンス

ContentChildren

参考URL

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

検索

スポンサードリンク

バージョン

リファレンス