如何在Angular中结合接口为不同组件注入不同服务实现？

现有如下接口：

interface Service {
  make(): void;
  get(): any;
}

以及两个实现该接口的服务：

class Service1 implements Service {
   constructor(private rootService: RootService) {}
   make() {}
   get() {}
}

class Service2 implements Service {
   constructor(private rootService: RootService) {}
   make() {}
   get() {}
}

需要在ComponentA和ComponentB中，以相同的注入类型Service使用不同的具体服务实现：

class ComponentA {
  constructor(private service: Service) {}
}

class ComponentB {
  constructor(private service: Service) {}
}

考虑到服务依赖RootService，该如何实现此需求？

在Angular里，你可以用以下两种方式实现这个需求，同时能自动处理RootService的依赖注入——只要RootService已经在合适的层级（根模块、父组件或当前模块）配置好就行：

方法一：直接在组件里指定提供者 #

最简单的方式是给每个组件单独配置providers，把Service接口映射到对应的具体实现：

// ComponentA的完整配置
@Component({
  selector: 'app-component-a',
  templateUrl: './component-a.component.html',
  providers: [
    { provide: Service, useClass: Service1 }
  ]
})
class ComponentA {
  constructor(private service: Service) {} // 这里注入的是Service1实例
}

// ComponentB的完整配置
@Component({
  selector: 'app-component-b',
  templateUrl: './component-b.component.html',
  providers: [
    { provide: Service, useClass: Service2 }
  ]
})
class ComponentB {
  constructor(private service: Service) {} // 这里注入的是Service2实例
}

因为Service1和Service2的构造函数都依赖RootService，只要RootService已经被正确提供，Angular的注入器会自动找到它并注入到服务实例里，不用额外写配置。

方法二：用自定义注入令牌（更适合复杂场景） #

如果你的项目用了AOT编译，或者需要在多个地方复用这个服务映射，TypeScript接口在编译后会被擦除，直接用Service作为注入标识可能出问题。这时候可以自定义一个注入令牌：

1. 先创建令牌：

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

// 创建一个类型为Service的注入令牌
export const SERVICE_TOKEN = new InjectionToken<Service>('Service');

2. 然后在组件里配置并注入：

@Component({
  selector: 'app-component-a',
  templateUrl: './component-a.component.html',
  providers: [
    { provide: SERVICE_TOKEN, useClass: Service1 }
  ]
})
class ComponentA {
  constructor(@Inject(SERVICE_TOKEN) private service: Service) {}
}

@Component({
  selector: 'app-component-b',
  templateUrl: './component-b.component.html',
  providers: [
    { provide: SERVICE_TOKEN, useClass: Service2 }
  ]
})
class ComponentB {
  constructor(@Inject(SERVICE_TOKEN) private service: Service) {}
}

这种方式同样能自动处理RootService的依赖，逻辑和方法一一致。

要注意的点 #

• RootService的提供层级必须正确：如果它是根级别提供（加了providedIn: 'root'），那所有组件都能拿到；如果是模块或父组件提供，要保证ComponentA和ComponentB在这个作用域内。
• JIT模式下直接用接口当注入标识能跑，但AOT模式下会报错，所以更稳妥的是用自定义注入令牌。

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