2017-03-02 6 views
2

は@NgModuleまたはでプロバイダを定義差が何であるか@Componentと@Moduleのプロバイダを注入する際のAngular2の違いは何ですか? angular2において

@NgModule({ 
    declarations: [ 
    ... 
    ], 
    imports: [ 
    ... 
    ], 
    providers: [ DataService ], 
    bootstrap: [AppComponent ] 
}) 
export class AppModule { } 

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'], 
    providers : [ DataService ] 
}) 
export class HomeComponent implements OnInit { 

... 
} 

等@Component要素でプロバイダを定義することが可能です@成分? 2つのうちの1つを選択する必要がある場合は、プロバイダーを定義するにはどうすればよいでしょうか?

答えて

3

角度アプリケーションはコンポーネントのツリーです。各コンポーネントには独自のインジェクタがあります。したがって、インジェクタのツリーがあります。あなたは、あなたがコンポーネントのいずれかでそのプロバイダにアクセスできるようになります((これは遅延ロードされ1を除く)任意の@NgModule内部プロバイダを定義した場合、今

AppComponent 
/   \ 
C1   C2 
      /\ 
      C3 C4 

:仮定は、次のセットアップを持っていますC1, C2, C3, C4)。プロバイダーを@Componentと定義した場合、C2と入力すると、C2とその子C2のみがそのプロバイダーにアクセスできるようになります。しかし、これも設定可能です。 @Selfのような追加のデコレータを使用すると、コンポーネントによって宣言された依存関係を検索できます。

3

@NgModule: サービスは、(コンストラクタ内で)サービスを注入するモジュールの子コンポーネントの中に存在するシングルトンになります。

@コンポーネント:サービスは、コンポーネントとその子コンポーネント内のシングルトンになります。

出典:https://angular.io/docs/ts/latest/guide/dependency-injection.html#when-to-use-the-ngmodule-and-when-an-application-component-

NgModuleとすると、アプリケーションコンポーネントを使用するには?

一方では、NgModuleのプロバイダがルートインジェクタに登録されています。つまり、NgModuleに登録されたすべてのプロバイダは、アプリケーション全体でアクセス可能になります。

一方、アプリケーションコンポーネントに登録されているプロバイダは、そのコンポーネントとそのすべての子でのみ使用できます。

3

違いは範囲です。

実際

  • コンストラクタにパラメータを追加して、 "注入"。 providers: [...]にそれを追加する
  • は、プロバイダがコンポーネントに登録されている場合は、複数のインスタンス

    になりますコンポーネントで提供

「を提供」されて、あなたはプロバイダの潜在的に多くのインスタンスを取得しますコンポーネントインスタンスが存在するため、値(サービスインスタンス)。プロバイダーが存在しても実際には注入されないため、インスタンスが作成されないため、「潜在的に」です。DIは、コンポーネント、ディレクティブ、パイプ、またはサービスインスタンスを作成するときにプロバイダをルックアップ

、それはプロバイダのコンストラクタパラメータの現在のインジェクタをチェックします。 インジェクタにプロバイダがない場合、インジェクタにプロバイダが見つかるか、親インジェクタが見つからなくなるまで、親インジェクタがチェックされます。

injector hieararchy (非遅延ロードされた)モジュールに登録されているプロバイダがルートインジェクタに追加されます。遅延ロードモジュールのインジェクタは、子インジェクタです。 AppComponentのインジェクタも、ルートインジェクタの子インジェクタです。 すべての子コンポーネントまたはディレクティブは、親コンポーネントインジェクタの子インジェクタを取得します。あなたがコンポーネント上でサービスを提供する場合これは、コンポーネントまたはディレクティブ

にプロバイダを追加する

は、このコンポーネントとその子孫コンポーネントがこのコンポーネントに登録され、プロバイダからインスタンスを取得します。どこでもプロバイダが見つからないため、インスタンスの作成は失敗します。

このコンポーネントのインスタンスが複数ある場合、各コンポーネント(その子孫を持つ)はこのサービスの別のインスタンスを取得します。プロバイダが@NgModule()に登録されている場合、モジュール

にプロバイダを追加

(非遅延ロードされた)すべてのコンポーネントとサービスは、このプロバイダを見つけること、及び同じインスタンスがどこでも注入されます。

プロバイダは怠惰なロードされたモジュールの@NgModule()に登録されている場合は遅延ロードされたモジュール

にプロバイダを追加し、その後、サービスは、このモジュールによってロードされたコンポーネントとサービスのために利用できるようになります。

関連する問題