AngularのngOnDestroyフック

フック ngOnDestroy は、 コンポーネントが削除される時に発火します。 このフック内で、リソースの解放、要素へのイベント購読の解除、 タイマーのクリアなどを行うことができます。

Angularにおけるコンポーネントの作成と削除は、 if 条件を用いてコンポーネントがリアクティブに 表示・非表示される際に発生します。 つまり、Angularはコンポーネントを単に隠すのではなく、 削除し、再度戻すのです。

また、コンポーネントはループ内でリアクティブに反復処理される際にも 作成および削除されます。 この場合も、Angularはコンポーネントを作成・削除します。

実際に試してみましょう。 インターフェース OnDestroy をインポートします：

app/user/user.component.tsimport { OnDestroy } from '@angular/core';

これをクラスに実装します：

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  
}

次に、フックを記述しましょう：

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  constructor() {
    console.log('constructor is started');
  }
  
  ngOnDestroy() {
    console.log('onDestroy is applied');
  }
}