带有 AOT 的类型提供程序中的角度条件

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-regulation-provider-problem。它的行为与ng serve和不同ng serve --aot。

我怎样才能做到这一点？我知道我可以使用FactoryProvider，但是我必须复制服务依赖项（工厂函数的参数和 deps 上的属性FactoryProvider）。

Answer 1

为了实现您的需求的动态特性，您需要通过属性使用工厂提供程序useFactory。

我已经分叉了您的存储库，并按如下方式修改了您的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]
    },
]

本指南包含有关在 Angular 中实现依赖注入的各种方法的更多详细信息。