如何动态覆盖 Angular2 可注入服务? [英] How do I dynamically overwrite an Angular2 Injectable Service?

问题描述

我有一个可注入的服务 HttpRequestService，当没有服务器时，我想用 MockHttpRequestService 替换它，因为我在开发模式下运行 (npm start).这个 MockHttpRequestService 将返回非常简单的响应.

I have an injectable service, HttpRequestService, which I would like replace with a MockHttpRequestService when there is no server because I'm running in development mode (npm start). This MockHttpRequestService will send back very simple responses.

我以为我找到了一种动态替换 HttpRequestService 的方法，但不幸的是我发现 HttpRequestService 仍在使用中.这是我尝试过的:

I thought I'd found a way to dynamically replace my HttpRequestService, but unfortunately I see that HttpRequestService is still being used. Here's what I tried:

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

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.
        //...
    }
}

推荐答案

您可以像这样在引导程序中使用 useClass 覆盖 Angular2 Service 可注入服务:

You can overwritte an Angular2 Service injectible service with useClass in bootstrap like that :

    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 服务的组件中

Or directly in your Components which uses your http service

@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 !
  }
}

我希望这个回复有帮助:)

I hope this response is helpful :)

这篇关于如何动态覆盖 Angular2 可注入服务?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！