Angular 2 可注入接口？

Question

今天我偶然发现了一些我认为不会给我带来麻烦的东西。

在 Java 和 Spring 中，我可以声明两个都实现给定接口的 bean，而在另一个注入它们的类中，我只使用接口；这实际上是我对 IoC 的喜爱：您不必知道您正在使用什么对象，只要它是种类。

所以在我的小 Angular2/Typescript 程序中，我试图做同样的事情：

webapp.module.ts：

... 
import { WebAppConfigurationService } from './app/services/webapp.configuration.service';

@NgModule({
  ...
  providers: [WebAppConfigurationService]
})
export class AppModule { }

tnsapp.module.ts:

...
import { TnsConfigurationService } from './services/tns.configuration.service';

@NgModule({
   ...
   providers: [TnsConfigurationService]
})
export class AppModule { }

这两个模块都使用不同的提供程序：TnsConfigurationService 或 WebAppConfigurationService。

但是，这两个@Injectable 服务实现了相同的接口：

配置界面：

export interface IConfigurationService {
    ...
}

最后，在我的一个组件中，我使用了我在开头向您展示的这些模块之一提供的注射剂：

import { IConfigurationService } from './configuration.interface';

export class HeroesService {

    constructor(private configurationService: IConfigurationService) { }
}

我的期望是最后一个组件被注入正确的服务，即使参数只是明确定义接口。当然我得到一个错误（“错误：无法解析 HeroesService 的所有参数”）

现在，我不希望有一个简单的解决方案，因为这听起来是架构上的不足。但也许有人可以指出另一种设计？

Answer 1

为了注入提供程序，应将其注册为提供程序。没有IConfigurationService 提供者。而且它不能是提供者，因为编译的JS代码中不存在接口。

应该用作提供者令牌的接口的常见做法是抽象类：

abstract class ConfigurationService { ... }

@Injectable()
class WebAppConfigurationService extends ConfigurationService { ... }

...
providers: [{ provide: ConfigurationService, useClass: WebAppConfigurationService }]
...

这个配方通常被 Angular 2 本身使用，例如abstract NgLocalization class 和 concrete NgLocaleLocalization implementation。