Angular：如何在创建组件时指定要注入的Service子类？

你当前的代码定义了抽象服务类MyService和两个具体实现FooService、BarService，但没法直接通过模板绑定的方式动态传入服务类——因为Angular的依赖注入机制是在组件初始化阶段由注入器处理的，模板输入属性的赋值时机晚于构造器注入的时机。下面提供几种可行的实现方式：

1. 组件级别配置提供者（固定注入某一子类） #

如果在使用MyComponent时，确定要注入的具体服务子类，可以直接在组件的@Component装饰器的providers数组里配置映射关系：

比如要注入FooService：

@Component({
  selector: 'my-component',
  template: `<span> {{ data }} </span>`,
  providers: [{ provide: MyService, useClass: FooService }]
})
export class MyComponent {
  data: string;

  constructor(service: MyService) {
    this.data = service.getData();
  }
}

如果要切换为BarService，只需要把useClass的值改成BarService即可。

2. 结合输入属性与注入器动态切换服务 #

如果需要在模板中动态指定要使用的服务子类，可以通过@Input接收服务类型标识，再用Injector手动获取对应服务实例：

import { Injector } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `<span> {{ data }} </span>`
})
export class MyComponent {
  data: string;

  constructor(private injector: Injector) {}

  @Input() set serviceType(type: 'foo' | 'bar') {
    let service: MyService;
    switch(type) {
      case 'foo':
        service = this.injector.get(FooService);
        break;
      case 'bar':
        service = this.injector.get(BarService);
        break;
      default:
        throw new Error('无效的服务类型');
    }
    this.data = service.getData();
  }
}

然后在模板中使用时：

<my-component [serviceType]="'foo'"></my-component>
<my-component [serviceType]="'bar'"></my-component>

3. 父组件/模块级别统一配置提供者 #

如果希望某一范围内（比如整个模块、父组件下的所有子组件）的MyComponent都注入同一个服务子类，可以在父组件或模块的providers里配置映射：

比如在模块中配置：

@NgModule({
  declarations: [MyComponent],
  providers: [{ provide: MyService, useClass: BarService }]
})
export class AppModule {}

这样该模块下所有MyComponent的构造器中注入的MyService都会是BarService的实例。

内容的提问来源于stack exchange，提问作者Him