AngularにおけるngOnInitフック

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

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

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

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

app/user/user.component.tsexport class UserComponent implements OnInit {

}

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

app/user/user.component.tsexport class UserComponent implements OnInit {
  constructor() {
    console.log('constructor is started');
  }
  ngOnInit() {
    console.log('onInit is applied');
  }
}