AngularのngOnDestroyフック

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

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

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

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

import { OnDestroy } from '@angular/core';

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

export class UserComponent implements OnDestroy {
	
}

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

export class UserComponent implements OnDestroy {
	constructor() {
		console.log('constructor is started');
	}
	
	ngOnDestroy() {
		console.log('onDestroy is applied');
	}
}

if を用いて、子コンポーネントを表示・非表示にするリアクティブな条件を作成してください。学んだフックの動作を確認しましょう。

親コンポーネントにユーザー名の配列が与えられています。ユーザーを表示する子コンポーネントを作成してください。配列をループで処理し、各ユーザーのコンポーネントを出力します。クリックすると配列から要素を削除するボタンを作成し、子コンポーネントで削除フックが発火することを確認してください。