コンストラクターと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

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

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

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

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

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

アトランタのドナ・ブラジル:「私があなたに私の話をするとき私を踏まないでください」

アトランタのドナ・ブラジル:「私があなたに私の話をするとき私を踏まないでください」

2017年11月19日にアトランタで開催されたドナブラジルとモーアイボリー(ダグスミスフォトグラフィー)ドナブラジルを見逃すことはありません。

彼らは北朝鮮から脱出した亡命者の胃の中に奇妙な寄生虫を見つけました

彼らは北朝鮮から脱出した亡命者の胃の中に奇妙な寄生虫を見つけました

画像:ゲッティ陰謀愛好家は新しくてエキサイティングなディスカッション資料を持っています:国境を越えて韓国に5発撃たれた北朝鮮の脱北者は寄生虫でいっぱいで、そのうちの1人は南のメディアは、寄生虫を持った北朝鮮の脱北者を見つけることは珍しいことではないと報告している、実際、男性が30以上のタイプを持っていたケースがあった。

パニッシャーの第2話は、複雑な陰謀の網を織り交ぜています

パニッシャーの第2話は、複雑な陰謀の網を織り交ぜています

写真:パニッシャー(Netflix)これらのMarvel Netflixが愛していることが1つあるとすれば、それは複雑な政府や企業の陰謀です。そして、なぜこれらのショーがそのルートを選択するのかを理解するのは簡単です。

最新のBoseヘッドフォンは音楽を聴くためのものではなく、パートナーの鼻を鳴らすためのものです。

最新のBoseヘッドフォンは音楽を聴くためのものではなく、パートナーの鼻を鳴らすためのものです。

あなたのパートナーはチェーンソーのように詮索し、あなたを眠らせませんか?あなたのパートナーはあなたがチェーンソーのように詮索したと主張しますが、あなたが詮索しないので彼らは彼の想像ですか?あなたのケースが何であれ、Bose(はい、ハイエンドオーディオ機器のメーカー)はあなたのために何かを持っています。それらはBoseSleepbudsと呼ばれます。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language