Angularライフフック

• 親コンポーネント

import { Component, OnInit } from '@angular/core';

// ngAferViewInit と ngAfterViewChecked を利用するための import
import { AfterViewInit, AfterViewChecked } from '@angular/core';

// 子コンポーネントで定義されたプロパティを取得するための import
import { ViewChild } from '@angular/core';

// 子コンポーネントを import
import { ChildComponent} from '../child/child.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit, AfterViewInit, AfterViewChecked {
  /**
   * ngAfterViewInit と ngAfterViewChecked の確認のためのプロパティ
   *
   * @type {String}
   * @memberof ChildComponent
   */
  public ngAfterViewCheckValue: String;

  /**
   * 子コンポーネントを参照
   *
   * @type {ChildComponent}
   * @memberof ParentComponent
   */
  @ViewChild(ChildComponent,{static: false}) viewChild: ChildComponent;

  constructor() { }

  /**
   * コンポーネントの初期化処理
   *
   * @memberof ParentComponent
   */
  ngOnInit() {
    this.ngAfterViewCheckValue = 'ngOnInitで初期化した';
  }

  /**
   * ビューの初期化をフックする
   *
   * @memberof ParentComponent
   */
  ngAfterViewInit() {
    console.log('[ParentComponent][ngAfterViewInit] fired');
  }

  /**
   * ビューの変更をフックする
   *
   * @memberof ParentComponent
   */
  ngAfterViewChecked() {
    console.log('[ViewParentComponent][ngAfterViewChecked] fired. ngAfterViewCheckValue={' + this.ngAfterViewCheckValue + '}');
  }
}

• 子コンポーネント

import { Component, OnInit } from '@angular/core';

// ngAferViewInit と ngAfterViewChecked を利用するための import
import { AfterViewInit, AfterViewChecked } from '@angular/core';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, AfterViewInit, AfterViewChecked {

    /**
     * ngAfterViewInit と ngAfterViewChecked の確認のためのプロパティ
     *
     * @type {String}
     * @memberof ChildComponent
     */
    public ngAfterViewCheckValue: String;

    constructor() { }

    /**
     * コンポーネントの初期化処理
     *
     * @memberof ChildComponent
     */
    ngOnInit() {
      this.ngAfterViewCheckValue = 'ngOnInitで初期化した';
    }

    /**
     * ビューの初期化をフックする
     *
     * @memberof ChildComponent
     */
    ngAfterViewInit() {
      console.log('[ChildComponent][ngAfterViewInit] fired.');
    }

    /**
     * ビューの変更をフックする
     *
     * @memberof ViewChildComponent
     */
    ngAfterViewChecked() {
      console.log('[ChildComponent][ngAfterViewChecked] fired. ngAfterViewCheckValue={' + this.ngAfterViewCheckValue + '}');
    }
  }