如何動態覆蓋Angular2 Injectable Service？

我有一個注射服務，HttpRequestService，我想在沒有服務器時用MockHttpRequestService替換，因爲我在開發模式（npm start）下運行。這個MockHttpRequestService將發回非常簡單的響應。如何動態覆蓋Angular2 Injectable Service？

我想我找到了一種方法來動態替換我的HttpRequestService，但不幸的是我看到HttpRequestService仍在使用中。下面是我的嘗試：

main.ts

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {provide} from '@angular/core'; 
import {ROUTER_PROVIDERS, Router} from '@angular/router-deprecated'; 
import {HashLocationStrategy, LocationStrategy} from '@angular/common' 
import {Http, HTTP_PROVIDERS} from '@angular/http'; 
import {CORE_DIRECTIVES} from '@angular/common'; 
import {HttpRequestService} from './app/services/HttpRequestService'; 
import {MockHttpRequestService} from './app/services/MockHttpRequestService' 
import {MyConfigInjectable} from './app/MyConfigInjectable'; 
import {SomeService} from './app/services/SomeService'; 

export function main(initialState?: any): Promise<any> { 

    let providers = [ 
     ...HTTP_PROVIDERS, 
     ...CORE_DIRECTIVES, 
     ...ROUTER_PROVIDERS, 
     provide(LocationStrategy, { useClass: HashLocationStrategy }) 
    ]; 

    if(process.env.ENV === 'development'){ 
     console.log('Is it set to development?'); //Yes. Yes it is. 
     providers.push(MyConfigInjectable); 
     providers.push(SomeService); 
     providers.push(provide(HttpRequestService, { 
      deps: [MyConfigInjectable, Http, SomeService, Router], 
      useClass: MockHttpRequestService 
     })); 
    } 

    return bootstrap(App, providers).catch(err => console.error(err)); 
}

MockHttpRequestService.ts

import {Injectable} from '@angular/core'; 
import {Http} from '@angular/http'; 
import {Router} from '@angular/router-deprecated'; 
import {SomeService} from './SomeService'; 
import {MyConfigInjectable} from '../MyconfigInjectable'; 

@Injectable() 
export class MockHttpRequestService extends HttpRequestService { 
    constructor(protected config: MyConfigInjectable, 
       protected http: Http, 
       protected someService: SomeService, 
       protected router: Router) { 
     super(config, http, someService, router); 
    } 

    post(url: string, body: string) { 
     console.log('Are we getting here?'); //No. No we're not. 
     //... 
    } 
}

來源

2016-06-14 SnoopDougg

哎呀。 NVM。得到它的工作。我正在覆蓋App.ts組件中的新提供者。一旦我從App.ts的組件的提供者中刪除了HttpRequestService，並且只在main.ts中聲明它，一切都奏效了。我可能會刪除這個問題，除非有人反對。 – SnoopDougg

您可以引導與useClass overwritte的Angular2服務針劑服務這樣的：

import {provide} from '@angular/core'; 

    const IS_ENV_DEV = true; //Put this constant in your config maybe 

    bootstrap(App, [ 
     provide(RaceService, {useClass: IS_ENV_DEV ? MockHttpRequestService : HttpRequestService}) 
    ])

或直接在您的使用您的http服務的組件中

@Component({ 
    selector: 'my-comp', 
    providers: [provide(HttpRequestService, {useClass: MockHttpRequestService})], 
    template: `<strong>I use a mocked service</strong>` 
}) 
export class MyComponent { 

    constructor(private httpRequestService: HttpRequestService) { 
    //Faker ! 
    } 
}

我希望這種反應是有幫助:)

來源

2016-06-14 21:43:56 NotBad4U

如何動態覆蓋Angular2 Injectable Service？

回答

相關問題