AngularのViewChildrenが動かない時に確認すべきこと (Angular2, 4, 5)


ViewChildren は、 ViewChild と違い、 AfterViewInit の前に作成される。
そのため、 ngOnInit で取得しようとしても動かない。
ハマりどころなので注意。

公式ドキュメントに書いてはあるんだけど、見逃す。
https://angular.io/api/core/ViewChildren

使い方

export class TestComponent implements OnInit, AfterViewInit {
  @ViewChildren(KoComponent) koComponents: QueryList<KoComponent>;

  ngOnInit(): void {
    const test = this.koComponents; // -> null
  }

  ngAfterViewInit(): void {
    const test = this.koComponents; // -> 値が入ってる
  }
}

注意しましょう。