コンストラクターとngOnInitの違い

1161
Haseena P A 2016-03-03 19:14.

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

ngOnInitすでに持っているのに、なぜ使用する必要がありconstructorますか?

25 answers

1186
Pardeep Jain 2016-03-03 19:20.

これConstructorは、クラスがインスタンス化されたときに実行されるクラスのデフォルトのメソッドであり、クラスとそのサブクラスのフィールドの適切な初期化を保証します。Angular、またはより優れたDependency Injector(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、すべての初期化/宣言に使用し、コンストラクターで機能するものを避けます。コンストラクターは、クラスメンバーを初期化するためにのみ使用する必要があり、実際の「作業」を行うべきではありません。

したがって、constructor()依存性注入の設定に使用する必要があります。ngOnInit()は、「開始」するのに適した場所です。これは、コンポーネントのバインディングが解決される場所/時間です。

詳細については、こちらを参照してください。

194
Max Koretskyi 2017-08-01 20:13.

記事AngularのコンストラクターとngOnInitの本質的な違いは、複数の観点から違いを探ります。この回答は、コンポーネントの初期化プロセスに関連する最も重要な違いの説明を提供し、使用法の違いも示しています。

Angularブートストラッププロセスは、次の2つの主要な段階で構成されます。

  • コンポーネントツリーの構築
  • 実行中の変更検出

コンポーネントのコンストラクターは、Angularがコンポーネントツリーを構築するときに呼び出されます。すべてのライフサイクルフックは、実行中の変更検出の一部として呼び出されます。

Angularがコンポーネントツリーを構築するとき、ルートモジュールインジェクターはすでに構成されているため、グローバルな依存関係を注入できます。また、Angularが子コンポーネントクラスをインスタンス化するとき、親コンポーネントのインジェクターも既に設定されているため、親コンポーネント自体を含む親コンポーネントで定義されたプロバイダーを注入できます。コンポーネントコンストラクターは、インジェクターのコンテキストで呼び出される唯一のメソッドであるため、依存関係が必要な場合は、それらの依存関係を取得する唯一の場所です。

Angularが変更検出を開始すると、コンポーネントツリーが構築され、ツリー内のすべてのコンポーネントのコンストラクターが呼び出されます。また、すべてのコンポーネントのテンプレートノードがDOMに追加されます。@Inputあなたは、コンストラクタで利用可能なプロパティを持つことを期待することはできませんので、通信機構は変化検出時に処理されます。以降に利用可能になりますngOnInit

簡単な例を見てみましょう。次のテンプレートがあるとします。

<my-app>
   <child-comp [i]='prop'>

そのため、Angularはアプリケーションのブートストラップを開始します。私が言ったように、それは最初に各コンポーネントのクラスを作成します。したがって、MyAppComponentコンストラクターを呼び出します。また、my-appコンポーネントのホスト要素であるDOMノードを作成します。次に、コンストラクターのchild-comp呼び出しと呼び出しのためのホスト要素の作成に進みChildComponentます。この段階では、i入力バインディングやライフサイクルフックにはあまり関係ありません。したがって、このプロセスが終了すると、Angularは次のコンポーネントビューのツリーになります。

MyAppView
  - MyApp component instance
  - my-app host element data
       ChildCompnentView
         - ChildComponent component instance
         - child-comp host element data  

その後、変更検出を実行し、MyAppComponentクラスのmy-appと呼び出しのバインディングを更新しますngOnInit。次に、ChildComponentクラスのchild-compと呼び出しのバインディングの更新に進みますngOnInit

初期化ロジックは、コンストラクターで実行することも、ngOnInit必要なものに応じて実行することもできます。たとえば、@ ViewChildクエリが評価される前にViewContainerRefを取得する方法については、コンストラクターで実行する必要のある初期化ロジックのタイプを示しています

トピックをよりよく理解するのに役立ついくつかの記事があります。

98
Morgan G 2016-03-03 19:30.

最良の例はサービスの利用だと思います。コンポーネントが「アクティブ化」されたときにサーバーからデータを取得したいとします。サーバーからデータを取得した後、データにいくつかの追加の処理を加えたいとしましょう。エラーが発生し、別の方法でログを記録したい場合があります。

コンストラクターよりもngOnInitを使用すると非常に簡単です。また、アプリケーションに追加する必要のあるコールバックレイヤーの数も制限されます。

例えば:

export class Users implements OnInit{

    user_list: Array<any>;

    constructor(private _userService: UserService){
    };

    ngOnInit(){
        this.getUsers();
    };

    getUsers(){
        this._userService.getUsersFromService().subscribe(users =>  this.user_list = users);
    };


}

コンストラクターを使用すると、_userServiceを呼び出してuser_listにデータを入力することができますが、それを使用してさらにいくつかのことを実行したい場合があります。すべてが大文字であることを確認するように、データがどのように渡されるのか完全にはわかりません。

そのため、ngOnInitの使用がはるかに簡単になります。

export class Users implements OnInit{

    user_list: Array<any>;

    constructor(private _userService: UserService){
    };

    ngOnInit(){
        this.getUsers();
    };

    getUsers(){
        this._userService.getUsersFromService().subscribe(users =>  this.user_list = users);
        this.user_list.toUpperCase();
    };


}

見やすくなるので、他の場所で関数を探す代わりに、初期化時にコンポーネント内で関数を呼び出すだけです。本当に、それはあなたが将来読みやすくそして使いやすくするためにあなたが使うことができるただのもう一つのツールです。また、コンストラクター内に関数呼び出しを配置することは本当に悪い習慣だと思います!

88
Alireza 2017-06-06 00:04.

OK、最初にすべてのngOnInit部分である角度ライフサイクルながら、constructorの一部であるES6主な違いはここから始まるので、JavaScriptクラス!...

Angularのライフサイクルを示す、私が作成した以下のチャートを見てください。

Angular2 +では、これconstructorを行うDI(Dependency Injection)ために使用しますが、Angular 1では、Stringメソッドを呼び出し、どの依存関係が注入されたかを確認することで発生していました。

上の図でわかるようngOnInitに、コンストラクターの準備ができngOnChnagesた後に発生し、コンポーネントの準備ができた後に起動されます。すべての初期化はこの段階で発生する可能性があります。単純なサンプルはサービスを注入し、initで初期化します。

OK、私はあなたが見るためのサンプルコードも共有します、私たちがどのように使用されるか、ngOnInitそしてconstructor以下のコードで見てください:

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


@Component({
 selector: 'my-app',
 template: `<h1>App is running!</h1>
  <my-app-main [data]=data></<my-app-main>`,
  styles: ['h1 { font-weight: normal; }']
})
class ExampleComponent implements OnInit {
  constructor(private router: Router) {} //Dependency injection in the constructor

  // ngOnInit, get called after Component initialised! 
  ngOnInit() {
    console.log('Component initialised!');
  }
}
61
Thierry Templier 2016-03-03 20:36.

最初のもの(コンストラクター)はクラスのインスタンス化に関連しており、Angular2とは何の関係もありません。つまり、コンストラクターはどのクラスでも使用できます。新しく作成されたインスタンスの初期化処理を入れることができます。

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

公式angularのウェブサイトからの引用:

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

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

57
Miroslav Jonas 2018-01-30 01:16.

私は上記の説明にスキップされた一つの重要なものを追加し、時に説明しますMUST使用しますngOnInit

ViewChildrenContentChildrenElementRefなどを介してコンポーネントのDOMを操作している場合、コンストラクターフェーズではネイティブ要素を使用できません。

ただし、ngOnInitコンポーネントが作成され、チェック(ngOnChanges)が呼び出されると発生するため、この時点でDOMにアクセスできます。

export class App implements OnInit, AfterViewInit, AfterContentInit {
  @Input() myInput: string;
  @ViewChild() myTemplate: TemplateRef<any>;
  @ContentChild(ChildComponent) myComponent: ChildComponent; 

  constructor(private elementRef: ElementRef) {
     // this.elementRef.nativeElement is undefined here
     // this.myInput is undefined here
     // this.myTemplate is undefined here
     // this.myComponent is undefine here
  }

  ngOnInit() {
     // this.elementRef.nativeElement can be used from here on
     // value of this.myInput is passed from parent scope
     // this.myTemplate and this.myComponent are still undefined
  }
  ngAfterContentInit() {
     // this.myComponent now gets projected in and can be accessed
     // this.myTemplate is still undefined
  }

  ngAfterViewInit() {
     // this.myTemplate can be used now as well
  }
}
39
micronyks 2016-03-03 19:20.

短くて簡単な答えは、

Constructorconstructorあるdefault method実験(デフォルトではコンポーネントが構築されているとき)。an instanceクラスを作成すると、その時間もconstructor(default method)呼び出されます。つまり、コンポーネントconstructed or/and an instance is created constructor(default method)が呼び出され、関連するコードが記述されている場合は、が呼び出されます。基本的に、そして一般的にはAngular2servicesコンポーネントがさらに使用するために構築されているときなどを注入するために使用されていました。

OnInit:ngOnInitはconstructor(default method)、コンポーネントが初期化された後に最初に実行されるコンポーネントのライフサイクルフックです。

したがって、コンストラクターが最初に呼び出され、Oninitはコンストラクターメソッドの後に呼び出されます。

boot.ts

import {Cmomponent, OnInit} from 'angular2/core';
import {ExternalService} from '../externalService';

export class app implements OnInit{
   constructor(myService:ExternalService)
   {
           this.myService=myService;
   }

   ngOnInit(){
     // this.myService.someMethod() 
   }
}

リソース:ライフサイクルフック

両方の実装を示すこの小さなデモを確認できます。

23
Eduardo Dennis 2017-03-07 11:59.

他の多くの言語と同様に、クラスレベル、コンストラクター、またはメソッドで変数を初期化できます。特定の場合に何が最適かを判断するのは開発者の責任です。ただし、以下は、決定に関するベストプラクティスのリストです。

クラスレベルの変数

通常、ここで、残りのコンポーネントで使用されるすべての変数を宣言します。値が他に依存しない場合は初期化でき、変更されない場合はconstキーワードを使用して定数を作成できます。

export class TestClass{
    let varA: string = "hello";
}

コンストラクタ

通常、コンストラクターでは何もせず、注入されるクラスにのみ使用するのがベストプラクティスです。ほとんどの場合、コンストラクターは次のようになります。

   constructor(private http: Http, private customService: CustomService) {}

これにより、クラスレベルの変数が自動的に作成されるため、customService.myMethod()手動で行う必要なしにアクセスできます。

NgOnInit

NgOnitは、Angular2フレームワークによって提供されるライフサイクルフックです。コンポーネントOnInitを使用するには、コンポーネントを実装する必要があります。このライフサイクルフックは、コンストラクターが呼び出され、すべての変数が初期化された後に呼び出されます。初期化の大部分はここに行く必要があります。Angularがコンポーネントを正しく初期化したことを確認でき、コンポーネントが正しくOnInitロードされていないときに実行するのではなく、必要なロジックを実行し始めることができます。

これは、呼び出される順序の詳細を示す画像です。

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

TLDR

Angular 2フレームワークを使用していて、特定のライフサイクルイベントと対話する必要がある場合は、問題を回避するために、フレームワークによって提供されるメソッドを使用してください。

21
abbaf33f 2016-05-25 04:58.

これをテストするために、NativeScriptチュートリアルから借用してこのコードを作成しました。

user.ts

export class User {
    email: string;
    password: string;
    lastLogin: Date;

    constructor(msg:string) {        
        this.email = "";
        this.password = "";
        this.lastLogin = new Date();
        console.log("*** User class constructor " + msg + " ***");
    }

    Login() {
    }
}

login.component.ts

import {Component} from "@angular/core";
import {User} from "./../../shared/user/user"

@Component({
  selector: "login-component",
  templateUrl: "pages/login/login.html",
  styleUrls: ["pages/login/login-common.css", "pages/login/login.css"]
})
export class LoginComponent {

  user: User = new User("property");  // ONE
  isLoggingIn:boolean;

  constructor() {    
    this.user = new User("constructor");   // TWO
    console.log("*** Login Component Constructor ***");
  }

  ngOnInit() {
    this.user = new User("ngOnInit");   // THREE
    this.user.Login();
    this.isLoggingIn = true;
    console.log("*** Login Component ngOnInit ***");
  }

  submit() {
    alert("You’re using: " + this.user.email + " " + this.user.lastLogin);
  }

  toggleDisplay() {
    this.isLoggingIn = !this.isLoggingIn;
  }

}

コンソール出力

JS: *** User class constructor property ***  
JS: *** User class constructor constructor ***  
JS: *** Login Component Constructor ***  
JS: *** User class constructor ngOnInit ***  
JS: *** Login Component ngOnInit ***  
20
Estus Flask 2018-02-10 02:35.

コンストラクタの主な違いとngOnInitそれがされngOnInitているライフサイクルフックコンストラクタの後と実行されます。コンポーネントを補間したテンプレートと入力の初期値はコンストラクターでは使用できませんが、で使用できますngOnInit

実際の違いはngOnInit、コードの構造にどのように影響するかです。ほとんどの初期化コードは、に移動することができますngOnInit-これは競合状態を作成しない限り

コンストラクターのアンチパターン

かなりの量の初期化コードがあると、コンストラクターメソッドの拡張、読み取り、テストが困難になります。

初期化ロジックをクラスコンストラクタから分離するための通常のレシピは、次のような別のメソッドに移動することですinit

class Some {
  constructor() {
    this.init();
  }

  init() {...}
}

ngOnInit コンポーネントとディレクティブでこの目的を果たすことができます:

constructor(
  public foo: Foo,
  /* verbose list of dependencies */
) {
  // time-sensitive initialization code
  this.bar = foo.getBar();
}

ngOnInit() {
  // rest of initialization code
}

依存性注入

Angularでのクラスコンストラクターの主な役割は、依存性注入です。コンストラクターは、TypeScriptのDIアノテーションにも使用されます。ほとんどすべての依存関係は、プロパティとしてクラスインスタンスに割り当てられます。

平均的なコンポーネント/ディレクティブコンストラクターは、依存関係のために複数行の署名を持つことができるため、すでに十分に大きく、コンストラクター本体に不要な初期化ロジックを配置すると、アンチパターンに寄与します。

非同期初期化

非同期初期化コンストラクターは、多くの場合、アンチパターンと見なされ、非同期ルーチンよりも先にクラスのインスタンス化が終了するため、臭いがします。これにより、競合状態が発生する可能性があります。そうでない場合ngOnInit、特にasync構文の恩恵を受けることができるため、他のライフサイクルフックがこれに適した場所です。

constructor(
  public foo: Foo,
  public errorHandler: ErrorHandler
) {}

async ngOnInit() {
  try {
    await this.foo.getBar();
    await this.foo.getBazThatDependsOnBar();
  } catch (err) {
    this.errorHandler.handleError(err);
  }
}

競合状態(初期化エラー時にコンポーネントが表示されない条件を含む)がある場合は、コンポーネントのインスタンス化の前に非同期初期化ルーチンを実行し、親コンポーネント、ルーターガードなどに移動する必要があります。

ユニットテスト

ngOnInitコンストラクターよりも柔軟性があり、この回答で詳細に説明されている単体テストにいくつかの利点があります。

ngOnInit単体テストでのコンポーネントのコンパイル時に自動的に呼び出されないことを考慮すると、呼び出されたメソッドはngOnInit、コンポーネントのインスタンス化後にスパイまたはモックされる可能性があります。

例外的なケースでngOnInitは、他のコンポーネントユニット(たとえば、一部のテンプレートロジック)を分離するために完全にスタブ化することができます。

継承

子クラスはコンストラクターを拡張することしかできず、コンストラクターを置き換えることはできません。

this以前super()は参照できないため、初期化の優先順位に制限があります。

AngularコンポーネントまたはディレクティブがngOnInit時間に依存しない初期化ロジックを使用することを考慮すると、子クラスsuper.ngOnInit()は呼び出されるかどうか、いつ呼び出すかを選択できます。

ngOnInit() {
  this.someMethod();
  super.ngOnInit();
}

これは、コンストラクターだけで実装することは不可能です。

13
Preston 2016-12-10 09:52.

上記の回答は、元の質問のこの側面に実際には答えていません。ライフサイクルフックとは何ですか。このように考えるまで、それが何を意味するのかを理解するのに少し時間がかかりました。

1)コンポーネントが人間であると言います。人間には多くの生活段階を含む生活があり、それから私たちは失効します。

2)私たちのヒューマンコンポーネントには、次のライフサイクルスクリプトが含まれている可能性があります:生まれ、赤ちゃん、小学校、若年成人、中年成人、高齢者、死亡、処分。

3)子を作成する関数が必要だとします。これが複雑になり、かなりユーモラスになるのを防ぐために、関数は、ヒューマンコンポーネントライフのヤングアダルト段階でのみ呼び出されるようにします。したがって、親コンポーネントがヤングアダルト段階にある場合にのみアクティブになるコンポーネントを開発します。フックは、人生のその段階に信号を送り、コンポーネントがそれに作用するようにすることで、それを行うのに役立ちます。

楽しいもの。このようなものを実際にコーディングすることに想像力を働かせると、複雑で面白くなります。

8
UniCoder 2017-06-13 02:34.

ここで注意すべき2つのこと:

  1. コンストラクターは、そのクラスのオブジェクトが作成されるたびに呼び出されます。
  2. コンポーネントが作成されると、ngOnInitが呼び出されます。

どちらも使いやすさが異なります。

7
Negin 2017-05-02 20:14.

コンストラクタはJavaScriptでの方法であり、クラスはそれが直ちにそれが角フレームワークで使用されているか否かをコンストラクタを実行していないか、JavaScriptエンジンによって呼び出されnot.Soおよび角度は全く有してインスタンス化され.When ES6におけるクラスの特徴として考えられていますその上で制御します。

import {Component} from '@angular/core';
@Component({})
class CONSTRUCTORTEST {

//This is called by Javascript not the Angular.
     constructor(){
        console.log("view constructor initialised");
     }
}

「ConstructorTest」クラスは以下でインスタンス化されます。したがって、内部でコンストラクターを呼び出します(これらはすべてJavaScript(es6)によって発生します。Angularではありません)。

new CONSTRUCTORTEST();

そのため、Angularがコンポーネントの初期化を完了したときにAngular.ngOnInitレンダリングにngOnInitライフサイクルフックがあります。

import {Component} from '@angular/core';
@Component({})
class NGONINITTEST implements onInit{
   constructor(){}
   //ngOnInit calls by Angular
   ngOnInit(){
     console.log("Testing ngOnInit");
   }
}

まず、以下のようにクラスをインスタンス化します。これは、コンストラクターメソッドの即時実行で発生します。

let instance = new NGONINITTEST();

ngOnInitは、以下のように必要に応じてAngularによって呼び出されます。

instance.ngOnInit();

しかし、なぜAngularでコンストラクターを使用しているのか疑問に思われるかもしれません。

答えは依存性注入です。前述のように、コンストラクターはクラスがインスタンス化されるとすぐに(AngularによってngOnInitを呼び出す前に)JavaScriptエンジンによって呼び出されるため、typescriptは、コンストラクターで定義されている依存関係のタイプを取得するのに役立ち、最後に通知します。その特定のコンポーネントで使用する依存関係のタイプをAngularします。

7
Shajin Chandran 2018-06-08 23:45.

コンストラクター()は、コンポーネントのライフサイクルのデフォルトのメソッドであり、依存性の注入に使用されます。コンストラクターはTypescript機能です。

ngOnInit()はコンストラクターの後に呼び出され、ngOnInitは最初のngOnChangesの後に呼び出されます。

すなわち:

コンストラクター()-->ngOnChanges()-->ngOnInit()

上記のようngOnChanges()に、入力または出力のバインディング値が変更されたときに呼び出されます。

4
Bruno Ranschaert 2017-01-10 09:20.

どちらの方法にも異なる目標/責任があります。コンストラクター(言語でサポートされている機能)のタスクは、表現の不変条件が保持されていることを確認することです。それ以外の場合は、メンバーに正しい値を指定して、インスタンスが有効であることを確認するように記述されています。「正しい」が何を意味するかを決めるのは開発者次第です。

onInit()メソッド(角度の概念)のタスクは、正しいオブジェクト(表現不変)でのメソッド呼び出しを可能にすることです。次に、各メソッドは、メソッドが終了したときに表現の不変条件が保持されることを確認する必要があります。

コンストラクターを使用して「正しい」オブジェクトを作成する必要があります。onInitメソッドを使用すると、明確に定義されたインスタンスでメソッド呼び出しを呼び出すことができます。

4
JS dev 2017-12-20 20:47.

コンストラクター: ES6クラス(この場合はTypeScript)のコンストラクターメソッドは、Angular機能ではなく、クラス自体の機能です。コンストラクターが呼び出されたときはAngularの制御外です。つまり、Angularがコンポーネントの初期化を完了したときに通知するのに適したフックではありません。JavaScriptエンジンは、Angularを直接呼び出すのではなく、コンストラクターを呼び出します。これが、ngOnInit(およびAngularJSの$ onInit)ライフサイクルフックが作成された理由です。これを念頭に置いて、コンストラクターを使用するための適切なシナリオがあります。これは、依存性注入を利用したい場合です。基本的には、依存関係をコンポーネントに「配線」するためです。

コンストラクターはJavaScriptエンジンによって初期化されるため、TypeScriptを使用すると、特定のプロパティに対してマッピングする必要のある依存関係をAngularに伝えることができます。

ngOnInitは、Angularがコンポーネントの初期化を完了したことを通知するためだけにあります。

このフェーズには、@ Input()デコレータの使用など、コンポーネント自体にバインドする可能性のあるプロパティに対する変更検出の最初のパスが含まれます。

このため、@ Input()プロパティはngOnInit内で使用できますが、設計上、コンストラクター内では定義されていません。

2
user1012506 2018-12-05 20:34.

コンストラクターが最初であり、@ inputデータがnullの場合に発生することがあります!したがって、サービスの宣言にはコンストラクターを使用し、その後ngOnInitが発生します。建設業者の例:

 constructor(translate: TranslateService, private oauthService: OAuthService) {
    translate.setDefaultLang('En');
        translate.use('En');}

onInitの例:

ngOnInit() {
    this.items = [
      { label: 'A', icon: 'fa fa-home', routerLink: ['/'] },
      { label: 'B', icon: 'fa fa-home', routerLink: ['/'] }]
}

onInitはwinFormのInitialComponents()に似ていると思います。

2
dasunse 2019-11-19 01:39.

コンストラクターは、クラスがインスタンス化されるときに実行されます。それは角度とは何の関係もありません。これはJavascriptの機能であり、Angularはそれを制御できません

ngOnInitはAngular固有であり、Angularがすべての入力プロパティでコンポーネントを初期化したときに呼び出されます

@Inputプロパティは、ngOnInitライフサイクルフックの下で使用できます。これは、バックエンドサーバーからデータを取得してビューに表示するなどの初期化作業を行うのに役立ちます

@Inputプロパティは、コンストラクター内で未定義として表示されます

1
Moslem Shahsavan 2017-11-04 20:02.

Angularのライフサイクル

1)Angularインジェクターはコンストラクターパラメーターを検出し、クラスをインスタンス化します。

2)次のAngularCallライフサイクル

Angularライフサイクルフック

ngOnChanges->ディレクティブパラメータバインディングを呼び出します。

ngOnInit->角度レンダリングを開始します。..

角度のあるライフサイクルの状態で他のメソッドを呼び出します。

1
veben 2019-01-19 02:23.

constructorときアンギュラ「instanciates /構造」コンポーネントと呼ばれています。このngOnInitメソッドは、コンポーネントのライフサイクルの初期化部分を表すフックです。サービスインジェクションにのみ使用することをお勧めします

constructor(private 
    service1: Service1,
    service2: Service2
){};

可能であっても、内部で「作業」を行うべきではありません。コンポーネントの「初期化」で発生する必要のあるアクションを起動する場合は、次を使用しますngOnInit

ngOnInit(){
    service1.someWork();
};

さらに、親コンポーネントからの入力プロパティを含むアクションは、コンストラクターで実行できません。それらはngOnInitメソッドまたは別のフックに配置する必要があります。ビューに関連する要素(DOM)についても同じです。たとえば、viewchild要素

@Input itemFromParent: string;
@ViewChild('childView') childView;

constructor(){
    console.log(itemFromParent); // KO
    // childView is undefined here
};

ngOnInit(){
    console.log(itemFromParent); // OK
    // childView is undefined here, you can manipulate here
};
1
DeC 2019-10-29 02:18.

コンストラクタ

コンストラクター関数はすべてのクラスに付属しています。コンストラクターはAngularに固有のものではなく、オブジェクト指向設計から派生した概念です。コンストラクターは、コンポーネントクラスのインスタンスを作成します。

OnInit

このngOnInit関数は、Angularコンポーネントのライフサイクルメソッドの1つです。Angularコンポーネントのライフサイクルメソッド(またはフック)を使用すると、コンポーネントのライフサイクルのさまざまな段階でコードを実行できます。コンストラクターメソッドとは異なり、ngOnInitメソッドは、OnInitこのメソッドを使用するためにコンポーネントが実装する必要のあるAngularインターフェイス()から取得されます。このngOnInitメソッドは、コンポーネントが作成された直後に呼び出されます。

1
nirmal 2020-09-02 00:01.

Constructor はES6の一部であり、typescriptはes6構文を使用しており、現在はes7も使用しているため、typescriptが(定義に従って)es5 / es4にコンパイルする高度な機能を利用して、古いブラウザーをサポートできます。

一方ではngOnInIt、角度のライフサイクルフックです。コンポーネントが初期化されるときに初期化されます。(新しい生命から生まれた状態だと考えてください)

それは使用することが賢明ですngOnInItあなたのような別のライフサイクルフックを持っているので、コンストラクタに比較ngOnDestory(任意の生命の死としてそれを考慮してください)。ここで、メモリリークを防ぐのに適したオブザーバブルのサブスクライブを解除できます。

ご不明な点がございましたら、この回答にコメントしてください。

0
Zameer Ansari 2017-08-10 02:29.

constructor() 依存性注入を行うために使用されます。

ngOnInit()ngOnChanges()およびngOnDestroy()などのライフサイクルメソッドです。バインドされたプロパティの値が変更ngOnChanges()される前にngOnInit()、が最初に呼び出されます。変更がない場合は呼び出されません。ngOnDestroy()コンポーネントが削除されたときに呼び出されます。それを使用するにOnDestroyimplement、クラスによって編集される必要があります。

0
doudou 2019-03-13 22:33.

私は答えを見つけ、それを英語に翻訳しようとしました。この質問は、技術面接でもまだ発生していました。実際、この2つには大きな類似点がありますが、いくつかの違いもあります。

  • コンストラクターはECMAScriptの一部です。一方、ngOnInit()は角度の概念です。

  • Angularを使用しなくても、すべてのクラスでコンストラクターを呼び出すことができます

  • ライフサイクル:コンストラクターはngOnInt()の前に呼び出されます

  • コンストラクターでは、HTML要素を呼び出すことはできません。ただし、ngOnInit()では可能です。

  • 通常、コンストラクターではなくngOnInit()でのサービスの呼び出し

    出典:http//www.angular-tuto.com/Angular/Component#Diff

0
Przemek Struciński 2019-05-29 05:30.

コンストラクターは、コンポーネント(または他のクラス)がビルドされるときに実行される関数です。

ngOnInitは、コンポーネントのライフサイクルメソッドグループに属する関数であり、コンポーネントの異なる瞬間に実行されます(そのため、ライフサイクルと呼ばれます)。それらすべてのリストは次のとおりです。

コンストラクターは、ライフサイクル関数の前に実行されます。

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

2021 年 6 月 8 日にニューヨーク市で開催された covid-19 パンデミックで亡くなった人々の命を偲び、祝うために、ネーミング ザ ロスト メモリアルズが主催するイベントと行進の最中に、グリーンウッド墓地の正門から記念碑がぶら下がっています。週末、ジョー・バイデン大統領は、covid-19 パンデミックの終息を宣言しました。これは、過去 2 年以上にわたり、公の場でそうするための長い列の中で最新のものです。

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

オハイオ州のエミリー・デシャネル みんな早く来て、ボーンズが帰ってきた!まあ、ショーボーンズではなく、彼女を演じた俳優. エミリー・デシャネルに最後に会ってからしばらく経ちました.Emily Deschanel は、長期にわたるプロシージャルな Bones の Temperance “Bones” Brennan としてよく知られています。

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

どうやら、ドナルド・トランプに近い人々は、今月初めにFBIによって家宅捜索された彼のMar-a-Lago財産からの映像を公開するよう彼に勧めています. 前大統領はテープを公開するかどうかを確認していませんが、息子はフォックス・ニュースにそうなるだろうと語った.

Andor は、他の Star Wars ショーから大きな距離を置きます。

Andor は、他の Star Wars ショーから大きな距離を置きます。

アンドールの一場面。数十年前、ジョージ・ルーカスがスター・ウォーズのテレビ番組を制作するのを妨げた主な理由は、お金でした。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language