如何动态覆盖Angular2可注入服务?
我有一个可注入的服务,HttpRequestService,当没有服务器时,我想用MockHttpRequestService替换它,因为我在开发模式(npm start)下运行。此MockHttpRequestService将返回非常简单的响应 我想我已经找到了一种动态替换HttpRequestService的方法,但不幸的是,我看到HttpRequestService仍在使用。以下是我尝试过的: 梅因酒店如何动态覆盖Angular2可注入服务?,angular,npm,mocking,angular-ui-bootstrap,Angular,Npm,Mocking,Angular Ui Bootstrap,我有一个可注入的服务,HttpRequestService,当没有服务器时,我想用MockHttpRequestService替换它,因为我在开发模式(npm start)下运行。此MockHttpRequestService将返回非常简单的响应 我想我已经找到了一种动态替换HttpRequestService的方法,但不幸的是,我看到HttpRequestService仍在使用。以下是我尝试过的: 梅因酒店 import {bootstrap} from '@angular/platform-
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));
}
您可以在引导中使用useClass覆盖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 !
}
}
@组件({
选择器:“我的公司”,
提供者:[提供(HttpRequestService,{useClass:MockHttpRequestService}],
模板:`我使用模拟服务`
})
导出类MyComponent{
构造函数(私有httpRequestService:httpRequestService){
//骗子!
}
}
我希望这个回答是有帮助的:)Oops。非挥发性物质。让它工作起来。我正在覆盖App.ts组件中的新提供程序。一旦我从App.ts组件的提供者中删除了HttpRequestService,并且只在main.ts中声明了它,一切都正常了。除非有人反对,否则我可能会删除这个问题。
@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 !
}
}