web-dev-qa-db-ja.com

Angular 2コンポーネントコンストラクタVs OnInit

最初にコンポーネントをロードするたびに関数xを実行したい場合は、別のサイトにナビゲートして戻るか、コンポーネントがロードされたのを5回目にします。

関数xを何に入れるべきですか？コンポーネントコンストラクタかOnInit？

angularconstructorngoninit
86
ClickThisNick

コンストラクタは、TypeScriptクラスの定義済みのデフォルトメソッドです。 Angularとconstructorの間に関係はありません。通常constructorを使用していくつかの変数を定義/初期化しますが、Angularのバインディングに関連するタスクがある場合はAngularのngOnInitライフサイクルフックに移動します。 ngOnInitはコンストラクタ呼び出しの直後に呼び出されます。コンストラクタでも同じことができますが、Angularのバインディングを開始するにはngOnInitを使用することをお勧めします。

ngOnInitを使用するには、コアライブラリからこのフックをインポートする必要があります。

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

それからエクスポートされたクラスでこのインターフェースを実装します（これはこのインターフェースを実装することを強制するものではありませんが、一般的には行いました）。

両方の使用例

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

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

詳しくは ConstructorとngOnInitの違い もご覧ください。

97
Pardeep Jain

最初のもの（コンストラクタ）はクラスのインスタンス化に関連しており、Angular 2とは関係ありません。コンストラクタはどのクラスでも使用できるということです。新しく作成したインスタンスの初期化処理をその中に入れることができます。

2番目のものはAngular 2コンポーネントのライフサイクルフックに対応します。

  • 入力または出力バインディング値が変更されたときにngOnChangesが呼び出されます
  • ngOnInitは最初のngOnChangesの後に呼び出されます

したがって、関数の初期化処理がコンポーネントのバインディングに依存している場合はngOnInitを使用する必要があります（たとえば、@Inputで定義されたコンポーネントパラメータ）。それ以外の場合はコンストラクタで十分です。

29
Thierry Templier

constructor()はTypeScriptの機能で、new SomeClass()のために呼び出されます。コンストラクタは、クラス階層内の適切なフィールド初期化順序を保証します。

ngOnInitはAngular 2ライフサイクルメソッドで、コンポーネントの構築が完了し、バインディングを評価して最初に入力を更新した後にAngularによって呼び出されます。

ConstructorとngOnInitの違い もご覧ください。

23
Günter Zöchbauer