Angularのライフサイクルフック

Angularには8つのフックがあり、コンポーネントのライフサイクルを利用して、ライフサイクルの特定のポイントでアクションをトリガーできます。

使用可能なライフサイクルフックを、呼び出された順序で次に示します。

• ngOnChanges ：データにバインドされた入力プロパティが変更されるたびに呼び出されます。 ngOnInitフックの前に初めて呼び出されます。 フックは、データバインドされた入力プロパティの以前の値と現在の値を含むSimpleChangesオブジェクトを受け取ります。 このフックは頻繁に呼び出されるため、処理量を制限することをお勧めします。
• ngOnInit ：コンポーネントの初期化時に1回呼び出されます。
• ngDoCheck ：Angularが検出しない変更には、ngOnChangesの代わりにこのフックを使用します。 変更検出サイクルごとに呼び出されるため、パフォーマンスを最小限に抑えることが重要です。
• ngAfterContentInit ：コンテンツがコンポーネントに投影された後に呼び出されます。
• ngAfterContentChecked ：投影されたコンテンツがチェックされた後に呼び出されます。
• ngAfterViewInit ：コンポーネントのビューまたは子ビューが初期化された後に呼び出されます。
• ngAfterViewChecked ：コンポーネントのビューまたは子ビューがチェックされた後に呼び出されます。
• ngOnDestroy ：コンポーネントが破棄されたときに一度呼び出され、オブザーバブルのクリーンアップとサブスクライブ解除に使用するのに適したフックです。

ngOnInit

ngOnInitフックを使用した簡単な例を示しましょう。 ngOnInit ライフサイクルフックは、おそらく最も頻繁に使用するフックです。 コンポーネントの作成時に実行する処理が多い場合は、コンストラクターではなくngOnInitフックで実行することをお勧めします。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    this.setupData();
    this.doStuff();
    // ...
  }

  setupData() {
    // ...
  }

  doStuff() {
    // ...
  }
}

OnInit をインポートする方法に注意してください。ただし、ngOnInitメソッドを使用して実装しています。 これは、他のライフサイクルフックについても同じ原則です。

複数のライフサイクルフック

複数のフックの実装も同様に簡単です。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
  constructor() {}

  ngOnInit() {
    console.log('Component Init');
  }

  ngOnDestroy() {
    console.log('Component Destroy');
  }
}

ngOnChanges

SimpleChanges オブジェクトを持つngOnChangesフックは、少し異なります。 実装方法は次のとおりです。 次のように使用されるコンポーネントがあるとします。

<my-todo [title]="title" [content]="content"></my-todo>

ここで、titleプロパティが変更されたときに何かを実行したいとします。

import { Component, Input, SimpleChanges, OnChanges }
  from '@angular/core';

@Component({
  // ...
})
export class MyTodoComponent implements OnChanges {
  @Input() title: string;
  @Input() content: string;
  constructor() { }