Angularリファレンス

Tweet

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

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

import {
  Component,
  Directive,
  AfterViewInit,
  ViewChild,
  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{
  @ViewChild(Child)child:Child;
  ngAfterViewInit() {
    console.log(this.child.no);
  }
}

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

参考URL

ViewChild decorator - Angular

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

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

• QueryList
• ViewChildren
• ViewChild
• ContentChildren
• ContentChild
• EventEmitter
• Output
• Input
• ComponentFactoryResolver
• ViewEncapsulation
• ChangeDetectionStrategy
• group
• keyframes
• animate
• transition
• style
• state
• trigger
• Component