2016-03-03 131 views
6

我即將使用multi-provider來導出依賴關係與其自身的依賴關係,因此它們可以一次注入到組件中。Angular 2多供應商用於導出依賴關係的依賴關係

對於分量

import {Component} from 'angular2/core'; 
import { FOO_PROVIDERS } from './foo'; 

@Component({ 
    selector: 'app', 
    providers: [FOO_PROVIDERS] 
}) 
export class App {} 

following

import {Inject, Injectable, provide} from 'angular2/core'; 
import {Http, HTTP_PROVIDERS} from 'angular2/http'; 

export class Foo { 
    constructor(@Inject(Http) http) {} 
} 

export const FOO_PROVIDERS = [ 
    provide(Foo, { useClass: Foo, multi: true }), 
    provide(Foo, { useValue: HTTP_PROVIDERS, multi: true }) 
]; 

將導致

沒有提供對於HTTP! (應用程序 - >富 - > HTTP)

而且this

import {Inject, provide} from 'angular2/core'; 
import {Http, HTTP_PROVIDERS} from 'angular2/http'; 

class Foo { 
    constructor(@Inject(Http) http) {} 
} 

export const FOO_PROVIDERS = [Foo, HTTP_PROVIDERS]; 

將正常工作,而我希望他們做類似的工作。

在這種情況下是否有適當的多供應商使用?

+0

作爲一個說明:我有一個掛斷 - 確保在定義類FOO之後放置FOO_PROVIDERS,而不是在 – Tucker

+0

@Tucker之前放置這是正確的,類不會被掛起 – estus

回答

3

當您註冊provide(Foo, ...),比你可以

constructor(foo:Foo) 

multi: true你獲得通過註冊爲Foo

constructor(foo:any) 

所有供應商提供

export const FOO_PROVIDERS = [ 
    provide(Foo, { useClass: Foo, multi: true }), 
    provide(Foo, { useValue: HTTP_PROVIDERS, multi: true }) 
]; 

constructor(@Inject(Foo) foo:Foo[]) 

,你會得到傳遞給foo包含Foo實例和爲第12項供應商(這些包含在HTTP_PROVIDERS

也許你有不同的期望列表

更新數組應該發生什麼。我不知道@Inject(Http) http在這裏是如何相關的。 HTTP_PROVIDERS僅註冊爲Foo的值。提供商解決問題時,您傳遞給useValue的價值無關緊要。 DI查找供應商Foo並通過了指定的值,並且完全不關心該值是什麼。在您的示例中沒有Http的提供者,因此Foo本身無法獲得Http注入。您需要註冊Http,這是當你直接添加HTTP_PROVIDERS到供應商(不useValue)來完成,因爲HTTP_PROVIDERS包含Http(這相當於provide(Http, {useClass: Http})

UPDATE2

// An injected service that itself needs to get passed in a dependency 
@Injectable() 
class Foo { 
    constructor(private http:Http); 
} 

// container for a bunch of dependencies  
@Injectable() 
class MyProviders { 
    // add everything you want to make available in your components 
    constructor(public foo:Foo, public bar:Bar, ...); 
} 

class MyComponent { 
    // inject just MyProviders and use the dependencies it provides 
    constructor(private providers: MyProviders) { 
    // access provided values 
    providers.foo.doSomething(); 
    providers.bar.doSomethingElse(); 
    } 
} 

// Add all providers to allow DI to resolve all above dependencies 
bootstrap(AppComponent, [HTTP_PROVIDERS, Foo, Bar]); 

}

+0

可悲的是,我無法驗證這一點。 [This](http://plnkr.co/edit/XyBBUNb6smvq3ieH4fp1?p=preview)和[this](http://plnkr.co/edit/nerxCcdwoju6MBplPXhI?p=preview)將導致注入Foo實例(使用'構造函數(@Inject(Foo)foo)'),唯一的區別是Http在多提供程序的情況下無法解析。做'constructor(foo:Foo [])'會拋出'沒有Array的提供者! (應用程序 - >數組)'。 – estus

+0

如果您將'FOO_PROVIDERS'添加到'App's提供程序而不是'Foo',這可以在您的第一個Plunker中正常工作http://plnkr.co/edit/mxet3Knfirnsf2jA0XGu?p=preview –

+0

事實上,它沒有,請注意'@Inject(Http)http'被故意註釋以確保注入的'foo'不是一個數組,而是Foo實例。使用未註釋的依賴關係(問題中的[第一個示例](http://plnkr.co/edit/rNRalQnnkAPcTItmguW3?p=preview))問題與描述的相同。所以目前還不清楚多供應商在這裏的使用有什麼問題,以及答案如何適用於這種情況。 – estus