【Angularのライフサイクル】ngOnInitとは？使い方などを解説！

この記事ではAngularのライフサイクルフックの一部である『ngOnInit』について、

  • ngOnInitとは
  • ngOnInitメソッドを内部に持っているOninitインターフェースとは

などを図を用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

ngOnInitとは

ngOnInitはコンポーネントの初期化処理を担うメソッドです。Angularのライフサイクルフックの一部であり、コンポーネントの初期化時にngOnInitに記載されている処理が実行されます。

以下にngOnInitを用いたプログラム例を示しています。

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `<h1>{{message}}</h1>`,
})
export class AppComponent implements OnInit {
  message?: string;

  ngOnInit() {
    this.message = 'Hello Angular!';
  }
}

上記のプログラムでは、コンポーネントの初期化時にngOnInitに記載されている処理が行われ、messageプロパティの値が「Hello Angular!」になります。

@Inputデコレータで修飾されたプロパティはngOnInitで初期化を行う

以下にngOnInit、ngOnChanges、constructorを用いたプログラム例を示しています。

child.component.ts

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

@Component({
  selector: 'app-child',
  template: `{{childItem}}`,
})
export class ChildComponent implements OnInit {
  @Input() childItem?: string;

  constructor() {
    console.log("constructorを呼び出しています");
    // constuctorが呼びされるタイミングでは、childItemプロパティの値が設定されていない
    console.log("constructor内でのchildItemの値: ", this.childItem); // undefined
  }

  ngOnChanges() {
    console.log("ngOnChangesを呼び出しています");
    // ngOnChangesが呼び出されるタイミングでは、childItemプロパティの値が設定されている
    console.log("ngOnChanges内でのchildItemの値: ", this.childItem); // 親コンポーネントからの値が表示される
  }

  ngOnInit() {
    console.log("ngOninitを呼び出しています");
    // ngOnInitが呼び出されるタイミングでは、childItemプロパティの値が設定されている
    console.log("ngOnInit内でのchildItemの値: ", this.childItem); // 親コンポーネントからの値が表示される
  }
}

// ログ
// constructorを呼び出しています
// constructor内でのchildItemの値: undefined
// ngOnChangesを呼び出しています
// ngOnChanges内でのchildItemの値: Hello Angular!
// ngOninitを呼び出しています
// ngOnInit内でのchildItemの値: Hello Angular!

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `<app-child [childItem] = 'parentItem' ></app-child>`,
})
export class AppComponent {
  parentItem = 'Hello Angular!'
}

上記のプログラムのログ出力から分かるように、ngOnInitはコンポーネントが作成された直後に一度だけ呼び出されます。もう少し詳しく説明すると、ngOnChangesをコンポーネントに使用している場合には、construtor→ngOnChangesの後にngOnInitが一度だけ呼び出されます。

@Inputデコレータで修飾されたプロパティはconstrutorが呼び出されるタイミングでは、まだ初期化されていません。そのため、construtor内で@Inputデコレータで修飾されたプロパティにアクセスすると、undefinedまたは初期値(設定している場合)が返されてしまいます。

そのため、@Inputデコレータで修飾されたプロパティの初期化はngOnInitで行います。

ngOnChangesでも@Inputデコレータで修飾されたプロパティの初期化を行うことができますが、ngOnChangesで初期化をした場合、@Inputデコレータで修飾されたプロパティの値が変わると、毎回ngOnChangesの処理が実行されてしまうため、初期化処理には向きません。

あわせて読みたい

『ngOnInitとconstructorの違い』については下記の記事で詳しく説明しています。興味のある方は下記のリンクからぜひチェックをしてみてください。

【Angular】「ngOnInit」と「constructor」の違いをわかりやすく解説！
【Angular】「ngOnInit」と「constructor」の違いをわかりやすく解説！

続きを見る

ngOnInitメソッドを内部に持っているOninitインターフェースとは

OnInitはAngularのcoreライブラリのインターフェースであり、以下に示すように、ngOnInitメソッドを内部に持っています。また、OnInitをimplementしたクラスはngOnInitメソッドの実装が強制されるようになります。

interface OnInit {
    ngOnInit(): void;
}

本記事のまとめ

この記事ではAngularのライフサイクルフックの一部である『ngOnInit』について、以下の内容を説明しました。

  • ngOnInitとは
  • ngOnInitメソッドを内部に持っているOninitインターフェースとは

お読み頂きありがとうございました。