1. ホーム
  2. angular

[解決済み] コンストラクタとngOnInitの違いについて

2022-03-17 14:42:16

質問

Angularが提供するライフサイクルフック ngOnInit をデフォルトで使用します。

なぜ ngOnInit を使用します。 constructor ?

解決方法は?

その Constructor はクラスのデフォルトメソッドで、クラスのインスタンスが作成されたときに実行され、クラスとそのサブクラスのフィールドが適切に初期化されるようにします。Angular、もしくはより優れた依存性インジェクタ(DI)はコンストラクタのパラメータを分析し、新しいインスタンスを作成する際に new MyClass() のように、コンストラクタのパラメータの型にマッチするプロバイダを探して解決し、それをコンストラクタに渡します。

new MyClass(someArg);

ngOnInit は、Angularがコンポーネントの作成を終了したことを示すためにAngularによって呼び出されるライフサイクルフックです。

をインポートする必要があります。 OnInit を使用するために、このようにします(実際に実装するのは OnInit は必須ではありませんが、グッドプラクティスと考えられています)。

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

というメソッドを利用することで OnInit ということで、このようなクラスを実装する必要があります。

export class App implements OnInit {
  constructor() {
     // Called first time before the ngOnInit()
  }

  ngOnInit() {
     // Called after the constructor and called  after the first ngOnChanges() 
  }
}

このインターフェイスを実装すると、ディレクティブのデータバインドプロパティが初期化された後に、カスタマイズされた初期化ロジックを実行することができます。 ngOnInit は、ディレクティブのデータバウンドプロパティが初めてチェックされた直後に呼び出されます。 であり、子プロセスがチェックされる前である。 これは、ディレクティブがインスタンス化されたときに一度だけ実行されます。

ほとんどの場合、私たちは ngOnInit はすべての初期化/宣言に使用し、コンストラクタで動作するものを避けています。コンストラクタはクラスのメンバを初期化するためだけに使用されるべきで、実際の作業やquot;work"を行うべきではありません。

そのため constructor() ngOnInit()は、コンポーネントのバインディングが解決される場所/時であるため、"start"するのに良い場所です。

詳しくはこちらをご覧ください。