2017-03-07 10 views
0

(次の段落は解析が難しいと思っています。Angular2:インスタンスレベルでの依存性注入

私は既存のコンポーネントを持っています。これはWidgetと呼ばれます。

Widgetは、ng2 DIを介してThingyを受け取る。 ThingyはDIを介してThingyPartを受け取ります。

今、私は新しいコンポーネントを書いています。それはWidgetListです。 WidgetListは最終的にループに入り、複数のWidgetを作成します。これらのそれぞれについて異なっている主な事はWidgetです。彼らはそれぞれThingyPartThingyに注入する必要があります。 WidgetList、そして唯一WidgetListは、それらを構築する方法を知っていて、構築するためには現在のループ変数が必要です。

最終的には、ループ毎に異なるThingyPartを提供する必要があります。 Widgetに触れることなくこれを達成する方法はありますか?

代替の質問:私はreceive the raw Injectorを私のWidgetListに入れることができます。ビューアがインジェクタAPIを使用して表示する子インジェクタを動的に追加および削除する方法はありますか?ある場合は、ループ内に新しい子インジェクタを作成し、古いインジェクタを削除することができます。 (あなたは何がクールだと思いますか?私にはこれを行う "提供する"テンプレートディレクティブがあります。)

+0

は「Thingy」角成分ですか? – shusson

+0

いいえ、それは@注射可能です。ちょうどサービス – masonk

+0

私は「Thingy」にDIを避け、「ウィジェット」でそれをインスタンス化します。これはコンポジションと依存関係の質問のように聞こえます。http://stackoverflow.com/questions/21022012/difference-between-dependency-and-composition – shusson

答えて

1

これはWidgetListコンポーネントのように聞こえますが、ThingyPartを工場として提供する必要があります。次に、WidgetListからのデータを使用してThingyPartのインスタンスを作成できます。

例えば、

@Component({ 
    selector: 'widget-list', 
    ..... 
    providers: [ 
     { provide: ThingConfigService, useFactory: (widget) => { 
     ... // use the Widget here to configure ThingConfigService as you need 
       // then you can use ThingConfigService within your ThingyPart 
       // and pull out the data that you need 
     }, deps: [ Widget ] 
     } 
    ] 
...... 

このuseFactoryオプションは、設定したThingyPartを返す関数を受け入れます。あなたが達成しようとしていることの詳細を理解することなく、あなたをさらに導くことは難しいです。

Thoughtram has an article about dependency injection that may prove useful

+0

ファクトリメソッド内のWidgetListインスタンスのデータを使用するにはどうすればよいですか?ファクトリは私が最初に見たものの1つでしたが、ファクトリ関数は何も役に立ちません: 'this'は未定義です。本当に必要なものはもちろんのこと、親コンテナで利用可能なものを除いて何も注入できません。ループ変数です。 – masonk

+0

https://plnkr.co/edit/CxMPf3?p=info plunkerがuseFactoryオプションでできることを表示しようとしています。useFactory関数で必要なものを設定するサービスを提供する必要があることに注意してください(コンポーネント自身を '提供する'ことはできません - それを反映するように私の答えを更新します) – snorkpete