ViewChildren

ViewChildrenは子コンポーネントにアクセスするためのデコレーターです。

@ViewChildrenで子コンポーネントの内容を定義しておき、AfterViewInitで子コンポーネントのビューを生成した後にアクセスが可能になります。

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

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

参考URL

ViewChildren decorator - Angular

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

Angularリファレンス

ViewChildren

参考URL

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

検索

スポンサードリンク

バージョン

リファレンス