javascript - 带有 AOT 的类型提供者中的 Angular 条件

Question

我有一个使用 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 属性)。

Answer 1

要实现需求的动态特性，您需要使用 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)的各种方法的更多详细信息。