我有一个使用 AOT 编译的 Angular 项目。我希望能够注册根据配置动态解析的 ClassProvider
。我使用的简化代码是这样的:
const isMock = Math.random() > 0.5;
@NgModule({
// ...
providers: [
{ provide: MyServiceBase, useClass: (isMock) ? MyServiceMock : MyService },
],
bootstrap: [AppComponent]
})
export class AppModule { }
问题是当我用 AOT 编译它时,我总是得到相同的服务。我希望在按 F5 时获得不同的服务(因为第一行的 randomness
)。在没有 AOT 的情况下进行编译时,它的行为符合我的预期。
这是 github 上的完整代码示例:https://github.com/vdolek/angular-test/tree/aot-conditioned-provider-problem .它与 ng serve
和 ng serve --aot
的行为不同。
我怎样才能做到这一点?我知道我可以使用 FactoryProvider
,但是我必须复制服务依赖项(工厂函数的参数和 FactoryProvider
上的 deps 属性)。
最佳答案
要实现需求的动态特性,您需要使用 factory providers,通过 useFactory
属性。
我已经 fork 了您的存储库,并修改了您的 app.module.ts如下,在AOT工作。
修改app.module.ts
如下
export let myServiceFactory = () => {
const isMock = Math.random() > 0.5;
return isMock ? new MyServiceMock() : new MyService();
};
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [
{provide: MyServiceBase, useFactory: myServiceFactory},
],
bootstrap: [AppComponent]
})
export class AppModule {
}
如果您的服务依赖于其他服务(这很可能会发生),您可以使用 deps
参数来传递所需的依赖项。
假设 MyServiceBase
依赖于两个服务,MyService1
和 MyService2
...您的工厂函数如下所示:
export let myServiceFactory = (service1:MyService1, service2:MyService2) => {
const isMock = Math.random() > 0.5;
return isMock ? new MyServiceMock(service1, service2) : new MyService(service1, service2);
};
您的提供商声明如下所示
providers: [
{
provide: MyServiceBase,
useFactory: myServiceFactory,
deps: [MyService1, MyService2]
},
]
This guide包含有关在 Angular 中实现依赖注入(inject)的各种方法的更多详细信息。
关于javascript - 带有 AOT 的类型提供者中的 Angular 条件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48908735/