コアポイント

• Angular 2コンポーネントはプロバイダーを使用できます。プロバイダーは、コンポーネントを使用できる注射可能なオブジェクトのセットです。プロバイダーは、Angular 2依存関係注射（DI）システムの基礎(chǔ)です。
• プロバイダーは、クラスプロバイダー、工場プロバイダー、価値プロバイダーの3つのタイプに分けることができます。クラスプロバイダーはクラスのインスタンスを生成し、工場プロバイダーは指定された関數(shù)の返品値を生成し、値プロバイダーはその値を直接返します。
• Angular 2のDIシステムを使用すると、クラス、機能、または値（プロバイダーと呼ばれる）を登録し、プロバイダー間の依存関係を解決し、プロバイダーの結(jié)果をコードで機能させ、インジェクター階層を維持できます。
• Angularのインジェクターは、クラスプロバイダーのインスタンスを1回だけ作成し、同じプロバイダーが使用されている限り、その後の注入ごとに同じインスタンスが受信されます。この機能により、1つのプロバイダーが生成した結(jié)果を制御する柔軟性と、単一のインスタンスまたは複數(shù)のインスタンスを使用するかどうかを柔軟に制御できます。
• Angular 2では、実際のプロバイダーに関連付けられたキー（「トークン」と呼ばれる）を使用してプロバイダーの登録を許可します。この機能は、コンポーネントコードを変更せずにサーバー呼び出しを行わない模擬クラスを交換できるユニットテストに役立ちます。

前の記事では、@Inputおよび@Outputアノテーションを使用してコンポーネントに出入りする方法について説明しました。この記事では、Angular 2コンポーネントの別の基本的な側(cè)面を紹介します - プロバイダーを使用する能力。

コンポーネント構(gòu)成プロパティリストに「プロバイダー」が表示されている可能性があります。また、コンポーネントに使用できる注射可能なオブジェクトのセットを定義できることがわかります。これは良いことですが、もちろん「プロバイダーとは何ですか？」という疑問を提起します。

http://ipnx.cn/link/f7f3bfce09a3008d185e177555549ec2d2 DIシステム（Pascalの記事で説明されているように）が、要するに、DIシステムは次の責(zé)任を負います。

• クラス、関數(shù)、または値を登録します。依存関係の注入のコンテキストでは、これらのアイテムは結(jié)果を生成するため「プロバイダー」と呼ばれます。たとえば、クラスはインスタンスを提供または生成するために使用されます。 （プロバイダーの種類の詳細については、以下を參照してください。）
• プロバイダー間の依存関係を解決します。たとえば、あるプロバイダーが別のプロバイダーが必要な場合。
• プロバイダーの結(jié)果を要求するとき、プロバイダーの結(jié)果をコードで機能させます。このプロセス（プロバイダーの結(jié)果をコードブロックで利用可能にする）は、「注入」と呼ばれます。プロバイダーの結(jié)果を挿入するコードは、論理的に「インジェクター」と呼ばれます。
インジェクターの階層を維持して、コンポーネントがインジェクターで利用できないプロバイダーのプロバイダーの結(jié)果を要求した場合、DIはインジェクターの階層を検索します。

図1：各コンポーネントには、プロバイダーを登録するための獨自のインジェクターがあります。インジェクターは、サブインジェクターを作成し、プロバイダーにリクエストをローカルインジェクターから起動し、インジェクター階層を検索します。 上から

• 工場プロバイダーは、指定された関數(shù)を?qū)g行するときに返されるコンテンツを生成/提供します。
• 価値プロバイダーは、結(jié)果を提供するために前の2つのようにアクションを?qū)g行する必要はなく、その価値のみを返します。
殘念ながら、「プロバイダー」という用語は、クラス、関數(shù)、または価値の両方を指すことがあり、プロバイダーが生成したもの、つまりクラスインスタンス、関數(shù)の返品値または返品値を指します。

（アプリケーションで使用するインスタンスを生成する?yún)g純なクラス）を使用してクラスプロバイダーを作成することにより、プロバイダーをコンポーネントに追加する方法を見てみましょう。

MyClass

図2：4つの屬性を持つシンプルなクラス。 （Visual Studio Codeのコードスクリーンショット）

わかりました、これはクラスです。次に、Angularにクラスプロバイダーを使用して登録するように指示して、依存関係噴射システムにコードで使用するインスタンスを提供するように依頼することができます。アプリケーションのルートコンポーネントとして使用されるコンポーネントProvDemo_01.tsを作成します。このコンポーネントをbootstrap.tsにロードし、アプリケーションを開始します。

図3：ルートコンポーネントをインスタンス化するアプリケーションのファイルを起動します。 bootstrap.ts

と呼ばれ、リポジトリにはコンポーネントのいくつかの異なるバージョンが含まれています。上記のProvDemoからインポートされた行を更新することにより、表示されたバージョンを変更できます。ルートコンポーネントの最初のバージョンは次のようになります。 ProvDemo

'sをインポートし、それをMyClass配列に追加し、コンストラクターパラメーターのタイプとして使用します。 CompDemoproviders このコンポーネントに

MyClass

• MyClass
's
• のプロパティ@Componentに追加します providersコンストラクターにタイプ「
」のパラメーターを追加
• MyClass
舞臺裏では、Angularがコンポーネントをインスタンス化すると、DIシステムは

タイプを表示し、新しく登録されたMyClassプロバイダーを探し、それを使用してインスタンスを生成し、「MyClass」（初期小文字 "M"）に割り當(dāng)てられます。 MyClass myClass

」に割り當(dāng)てるインスタンスを生成するプロセスは、両方ともAngularによって行われます。 TypeScriptの構(gòu)文を使用して検索するタイプを理解しますが、AngularのインジェクターはMyClassインスタンスを見つけて返すことに責(zé)任があります。 myClass

上記を考慮して、Angularは「providersに実際のものを使用しない理由はあまりありませんが、MyClassがサーバーを呼び出してデータを取得した場合、テスト環(huán)境ではそうしないか、そうすることができない場合があります。この問題を解決するには、サーバーの呼び出しを行わないMyClassでシミュレーションを置き換えることができる必要があります。 ProvDemo MyClassどのように交換を行うのですか？すべてのコードを繰り返して、各

に変更する必要がありますか？これは効率的ではなく、テストを書くのに悪いパターンです。 MyClass MyClassMock

。 ProvDemoデコレータに追加されたMyClass屬性は、次のように略されます。 MyClass これは、「プロバイダーを見つけるためにトークン（キー）として@Componentを使用し、プロバイダーをprovidersに設(shè)定するため、プロバイダーを要求すると、依存噴射システムが

<code>providers: [ provide(MyClass, {useClass: MyClass} ]</code>

では、これはどのようにしてテストを?qū)g施するのに役立ちますか？これは、テスト環(huán)境ではプロバイダーの登録をオーバーライドし、効果的に次のことを行うことができることを意味します。 MyClass MyClassこれにより、トークン（key）MyClassをクラスプロバイダー

<code>providers: [ provide("aStringNameForMyClass", {useClass: MyClass} ]</code>

<code>provide(MyClass, {useClass: MyClassMock})
</code>

MyClassTypeScriptを使用すると、MyClassMockパラメーターがMyClassタイプである必要があることを指定でき、DIシステムは作業(yè)を行い、MyClassMockインスタンスを提供します。

しかし、クラスの代わりに文字列トークンを使用する場合、Angularにプロバイダーの結(jié)果を注入するように指示するにはどうすればよいですか？ bootstrap.tsファイルを編集して、新しい値プロバイダーを追加し、文字列トークンに登録しましょう。バリュープロバイダーは、トークンに関連付けられた値を返すプロバイダータイプであることを忘れないでください。上記の例では、Angularにプロバイダーを@Componentの屬性に追加して登録するように指示しますが、プロバイダーをブートストラップ関數(shù)に渡すことでプロバイダーを登録することもできます（同じコンテンツをprovidersに追加できます。屬性）：providers

図5：バリュープロバイダーのを追加しました。 bootstrap.ts

関數(shù)を呼び出して文字列トークン（ "provide"）を渡すことでプロバイダーを追加し、バリュープロバイダーとプロバイダー自體を作成したいことを指定するオブジェクトを追加します。ケース、それは単純な値です。ここで、バリュープロバイダーによって生成された値をコンストラクターに注入したいと考えていますが、これは機能しません...SECURITY_KEY

<code>providers: [ provide(MyClass, {useClass: MyClass} ]</code>

パラメーターデコレータを提供します。他のすべてのデコレーターと同様に、私たちはそれをインポートする必要があり、それを使用してAngularに弦トークンに関連付けられたプロバイダーを注入するように指示します。これを行うには、SECURITY_KEY：@Injectを調(diào)整します create ProvDemo_02.ts

<code>providers: [ provide("aStringNameForMyClass", {useClass: MyClass} ]</code>

<code>providers: [ provide(MyClass, {useClass: MyClass} ]</code>

以上がAngular 2コンポーネントとプロバイダー：クラス、工場、および価値の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。