2016-02-15 107 views
4

我想在Redux的幫助下去除組件對Angular服務的依賴。如何從Action中爲Angular 2服務注入提供者?

基本上,流量元器件 - >動作 - >服務

在我想使用@角/芯,其被建議在構造要傳遞的HTTP模塊的服務:

export class SampleService { 
    constructor(public http: Http) {} 
} 

而我從行動調用服務,它不會得到http提供程序,因爲我沒有http提供程序的實例。

export default class SampleAction { 
    private _projectService; 
    constructor() { 
     this._sampleService = new SampleService(); 
    } 
} 

如何將http提供程序注入服務?

回答

2

在您的操作中,您可以在構造函數中注入Http並將其傳遞到服務實例中。類似於

export default class SampleAction { 
    private _projectService; 
    constructor(@Inject(Http) http: Http) { 
     this._sampleService = new SampleService(http); 
    }  
} 
+0

謝謝Vidhya!它使用這種方法。 – Sanjeev

0

實際上你不需要自己實例化服務。只需將服務注入組件或其他服務即可。重要的是要爲此執行流配置提供程序。在你的情況下,Http(更普遍的是HTTP_PROVIDERS)和SampleSampleService。爲整個應用程序(在引導級別)或組件(providers屬性)定義提供程序。

bootstrap(AppComponent, [ HTTP_PROVIDERS, SampleService ]); 

@Component({ 
    providers: [ HTTP_PROVIDERS, SampleService ] 
}) 
export class SomeComponent { 
    constructor(private action: SampleAction) { 
    } 

    executeAction() { 
    this.action.doSomething(); 
    } 
} 

這裏是你應該爲你的SampleAction類使用的代碼:

export default class SampleAction { 
    constructor(private _projectService: SampleService) { 
    } 
} 

您可以注意到,爲了能夠注入到服務中,@Injectable需要要使用的。

@Injectable() 
export class SampleService { 
    constructor(public http: Http) {} 
} 

這個答案可以給你使用依賴注入的方式和噴油器如何分級更多的提示在Angular2工作:

+0

感謝Thierry的幫助,但我正在尋找一個解決方案,其中組件不能瞭解該服務。 – Sanjeev

+0

你是什麼意思「不知道服務」?你的組件如何調用服務? –

+0

組件應該派發一個像flux/redux一樣的動作,然後動作將使用中間件來調用該服務。 – Sanjeev

0

使用不創建服務實例new SomeService()

相反,只需將類添加到bootstrap(.., [Providers])的提供程序或應該作爲共享服務實例的作用域的根的組件。

還將所有依賴項(構造函數參數)添加到提供程序列表中。

如果一切設置正確,這裏隨處可見的實例是由構造函數的參數要求,具有自動解決所有依賴一個實例中傳遞。

只需配置DI,讓它爲你做的工作。

+0

感謝Gunter的幫助,但我正在尋找一個解決方案,其中組件不能瞭解該服務。 – Sanjeev

相關問題