具有AOT的类型提供程序中的角条件 [英] Angular condition in type provider with AOT

问题描述

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

I have an Angular project which I compile with AOT. I want to be able to register ClassProvider that is resolved dynamically according to configuration. Simplified code I use is this:

const isMock = Math.random() > 0.5;

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

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

The problem is when I compile this with AOT I always get the same service. I would expect to get different service while hitting F5 (because of the randomness on the first line). When compiling without AOT it behaves as I expect.

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

Here is the whole code example on github: https://github.com/vdolek/angular-test/tree/aot-conditioned-provider-problem. It behaves differently with ng serve and ng serve --aot.

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

How can I achieve this? I know I could use FactoryProvider, but then I would have to duplicate the services dependencies (parameters of the factory function and deps property on the FactoryProvider).

推荐答案

要实现您的需求的动态性质，您需要使用

To achieve the dynamic nature of your requirement, you need to use factory providers, via the useFactory attribute.

我已经分叉了您的存储库，并修改了

I've forked your repository, and amended your app.module.ts as follows, to work in 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参数传递所需的依赖关系.

In the case that your service is dependent on other services, which, most likely it will, you can use the deps argument, to pass on the required dependencies.

假设MyServiceBase依赖于两个服务，MyService1和MyService2....您的工厂函数将如下所示:

Let's say that MyServiceBase is dependent on two services, MyService1 and MyService2... Your factory function will look as follows :

export let myServiceFactory = (service1:MyService1, service2:MyService2) => {

  const isMock = Math.random() > 0.5;

  return isMock ? new MyServiceMock(service1, service2) : new MyService(service1, service2);
}; 

和您的提供者选择将如下所示

and your providers decleration would look as follows

providers: [
    {
       provide: MyServiceBase, 
       useFactory: myServiceFactory,
       deps: [MyService1, MyService2]
    },
]

本指南包含有关在Angular中实现依赖项注入的各种方式的进一步详细信息.

This guide contains further detail on the various ways of achieving dependency injection in Angular.

这篇关于具有AOT的类型提供程序中的角条件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！