我有一个用AOT编译的Angular项目.我希望能够注册根据配置动态解析的ClassProvider.我使用的简化代码是这样的：

const isMock = Math.random() > 0.5;

@NgModule({
  // ...
  providers: [
    { provide: MyServiceBase, useClass: (isMock) ? MyServiceMock : MyService },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

问题是,当我使用AOT进行编译时,我总是得到相同的服务.我希望在按F5时会得到不同的服务(由于第一行的随机性).在没有AOT的情况下进行编译时,其行为符合我的预期.

这是github：https://github.com/vdolek/angular-test/tree/aot-conditioned-provider-problem上的整个代码示例.ng serve和ng serve –aot的行为有所不同.

我该如何实现？我知道我可以使用FactoryProvider,但是随后我将不得不复制服务依赖项(FactoryProvider的工厂函数参数和deps属性).

解决方法:

为了实现需求的动态性质,您需要通过useFactory属性使用factory providers,.

我已经分叉了您的存储库,并如下对您的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中实现依赖项注入的各种方式的更多详细信息.