AngularにおけるngOnInitフック

フックngOnInitは、コンポーネントの初期化時に発火します。その動作はクラスのコンストラクタに似ていますが、サーバーからのデータロードなど、より複雑なタスクを実行できます。

このフックの使用方法を見てみましょう。まずはそのインターフェースをインポートする必要があります。

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

次に、コンポーネントクラスにインターフェースを含める必要があります。

export class UserComponent implements OnInit {

}

その後、コンポーネントクラスにngOnInitメソッドを記述することができ、このメソッドはクラスの初期化時に自動的に実行されます。その動作を確認してみましょう。

export class UserComponent implements OnInit {
	constructor() {
		console.log('constructor is started');
	}
	ngOnInit() {
		console.log('onInit is applied');
	}
}

プライベートメソッドshowを作成し、コンポーネントの初期化時にそれを呼び出してください。