web-dev-qa-db-ja.com

Angular2のプロバイダーとは何ですか？

Angular2コンポーネントの構成では、providersは指定可能なキーの1つです。これらのプロバイダーはどのように定義され、何のために使用されますか？

@Component({
  ..
  providers: [..],
  ..
})

注：

Angular2のドキュメントは徐々に成熟していますが、まだまばらです。現在、providersを次のように定義しています：

コンポーネントが必要とするサービスの依存性注入プロバイダーの配列。

この再帰的な定義はあまり役に立ちません。例を使ったより詳細な説明が本当に役立ちます。

angularangular2-providers
42
Pranjal Mittal

プロバイダーは通常、シングルトン（1インスタンス）オブジェクトであり、他のオブジェクトは依存性注入（DI）を介してアクセスできます。

オブジェクトを複数回使用する予定がある場合（たとえば、異なるコンポーネントのHttpサービス）、そのサービスの同じインスタンスを要求（再利用）できます。 DIが作成する同じオブジェクトへの参照をprovidingすることにより、DIの助けを借りてそれを行います。

@Component){
  ..
  providers: [Http]
}

..毎回新しいオブジェクトを作成する代わりに：

@Component){}
class Cmp {
  constructor() {
    // this is pseudo code, doens't work
    this.http = new Http(...options);
  }
}

これは近似値ですが、それが Dependency Injection の背後にある一般的な考え方です-フレームワークに再利用可能なオブジェクトの作成と保守を処理させます...Providerは、これらの再利用可能なオブジェクト（依存関係）を表すAngularの用語です。

44
Sasxa

注射剤の登録

プロバイダーは、AngularのDIに注射可能物を知らせ、注射可能物（サービス）の範囲を定義します。

インジェクターの階層

AngularのDIは、コンポーネントとディレクティブの構造に似たインジェクターのツリー（親>子>孫> ...）を作成します。

プロバイダーごとに単一のインスタンス

プロバイダーはインジェクターごとに維持されます。各プロバイダーは、注入可能オブジェクトの単一のインスタンスを提供します。

プロバイダー検索

コンポーネントまたはディレクティブに依存関係（コンストラクターパラメーター）がある場合、DIはプロバイダーのこのコンポーネントのインジェクターの検索を開始します。ある場合は、このプロバイダーからインスタンスを要求し、それを注入します。

インジェクターに要求されたキー（タイプ）のプロバイダーがない場合、プロバイダーが見つかりそのインスタンスをインジェクトでき​​るようになるまで、ルート（ブートストラップ）まで親インジェクターにアクセスします。 （プロバイダが見つからない場合、DIはエラーをスローします）。

注入可能なインスタンスのスコープを定義する

これにより、共有サービスのスコープを定義できます。DIは、インスタンスが見つかるまで、インスタンスが要求されるコンポーネントから検索を開始するためです。

シングルトンかどうか

注射可能物を提供する場所の数によって、作成されるインスタンスの数が決まります（実際に要求された場合にのみインスタンス化されます）。

アプリケーション全体に対して単一のインスタンスが必要な場合は、ルートコンポーネントで（またはbootstrap(AppComponent, [...])を使用して、注入可能なonceのみを提供します。同じ動作になります。

コンポーネントAごとに新しいインスタンスが必要な場合は、コンポーネントAのプロバイダーに追加します。

（更新）NgModule lazy and non-lazy

NgModuleモジュールの導入により、追加のレベルが導入されました。非遅延ロードモジュールで登録されたプロバイダーは、階層内のルートコンポーネントの上にあります。

遅延ロードされるモジュールは、これらのコンポーネントによってロードされるコンポーネントおよびディレクティブの上にあります。

インジェクターが作成された後、プロバイダーは読み取り専用であるため、遅延読み込みモジュールからルートインジェクターにプロバイダーを追加する方法はありません。したがって、遅延ロードされたモジュールは独自のルートスコープを取得します。

https://stackoverflow.com/a/45231440/217408 も参照してください

19
Günter Zöchbauer

プロバイダは、angularサービスの注入方法を指示するレシピのようなものです。

多くの場合、プロバイダーをangularでこのように宣言します。

providers: [AnyService]

これはこのための短い手です：

[new Provider(AnyService, {useClass: AnyService})]

両方のアプローチは言っています：誰かが「AnyService」を必要とするときはいつでも、クラス「AnyService」を提供してください

上記の例では同じクラスを提供していますが、別のシナリオではこのようなことができます。

[new Provider(AnyService, {useClass: AnyServiceCustom})]

ただし、どちらのシナリオでも、コンストラクターは同じままです。

constructor( private _anyService: AnyService) {
}

よりよく理解するには、プロバイダーが直接関連しているため、Angular 2で依存性注入がどのように機能するかを理解する必要があります。

これは、すべてのangular 2開発者にとって必読です。

https://angular.io/docs/ts/latest/guide/dependency-injection.html?The%20Provider%20class%20and%20provide%20function#!#injector-providers

9
Daniel Pliscki

@Sasxaの単語を追加します。素晴らしい例を使ってより良く、明確で詳細な説明をするために Pro Angular book by Adam Freeman（第20章（サービスプロバイダーの使用））を指します。

プロバイダは、Angularが依存関係を最初に解決する必要があるときにサービスオブジェクトを作成および管理するクラスです。プロバイダはangularモジュールにクラスを登録するために使用されますサービスとして。その後、このサービスクラスは、モジュールの作成フェーズ中に他のコンポーネントによって使用されます。

「Servicesは、ディレクティブ、コンポーネント、パイプなど、アプリケーション内の他のビルディングブロックをサポートする共通機能を提供するオブジェクトです。サービスについて重要なのは、それらの使用方法です。 dependency injectionと呼ばれるプロセスを通じて。サービスを使用すると、Angularアプリケーションの柔軟性とスケーラビリティを高めることができますが、依存関係の注入は理解しにくいトピックです。 （プロAngular（20章））

実際、サービスは、オブジェクトを依存性注入によってサービスとして分散させることができます。

import { Injectable } from "@angular/core";

export enum LogLevel {DEBUG, INFO, ERROR}

    @Injectable()
    export class LogService {
      minimumLevel: LogLevel = LogLevel.INFO;
      logInfoMessage(message: string){
       this.logMessage(LogLevel.INFO, message);
      }
    }

@Component({
     selector: "example",
     templateUrl: "example.component.html"
})
export class exampleComponent {

  constructor(logService: LogService) {};
  //to do impl
}

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ LogService ],
  declarations: [ ExampleComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
0
fgul