Angular中如何为同一注入器提供多个服务实现？

问题场景 #

我在Angular模板中有如下结构：

<mat-tab-group>
  <mat-tab *ngIf="sees1">
    <app-custom-table
      (columnButtonClick)="service1.columnClicked($event)">
    </app-custom-table>
  </mat-tab>
  <mat-tab *ngIf="sees2">
    <app-custom-table>
    </app-custom-table>
  </mat-tab>
  <mat-tab *ngIf="sees3">
    <app-custom-table>
    </app-custom-table>
  </mat-tab>
  <mat-tab *ngIf="sees4">
    <app-custom-table>
    </app-custom-table>
  </mat-tab>
  <mat-tab *ngIf="sees5">
    <app-custom-table
      (columnButtonClick)="service5.columnClicked($event)">
    </app-custom-table>
  </mat-tab>
</mat-tab-group>

希望每个app-custom-table组件都能注入不同的服务实现，以展示和处理不同数据。

现有方案与改进思路 #

当前通过@Input()参数直接传递服务的方案如下：

<mat-tab-group>
  <mat-tab *ngIf="sees1">
    <app-custom-table [service]="serviceImpl1"
      (columnButtonClick)="service1.columnClicked($event)">
    </app-custom-table>
  </mat-tab>
  <mat-tab *ngIf="sees2">
    <app-custom-table [service]="serviceImpl2">
    </app-custom-table>
  </mat-tab>
  <mat-tab *ngIf="sees3">
    <app-custom-table [service]="serviceImpl3">
    </app-custom-table>
  </mat-tab>
  <mat-tab *ngIf="sees4">
    <app-custom-table [service]="serviceImpl4">
    </app-custom-table>
  </mat-tab>
  <mat-tab *ngIf="sees5">
    <app-custom-table [service]="serviceImpl5"
      (columnButtonClick)="service5.columnClicked($event)">
    </app-custom-table>
  </mat-tab>
</mat-tab-group>

我认为这种方式不够优，尝试改用组件providers配置，但直接在父组件中配置多个同令牌的提供者时，Angular无法区分每个app-custom-table实例该注入哪个服务：

@Component({
  providers: [
    { provide: BaseService, useClass: ImplementationService1 },
    { provide: BaseService, useClass: ImplementationService2 },
    { provide: BaseService, useClass: ImplementationService3 },
    { provide: BaseService, useClass: ImplementationService4 },
    { provide: BaseService, useClass: ImplementationService5 }]
})

补充说明：所有服务实现均继承自抽象类BaseService，包含大部分方法的默认实现；CustomTable<T>和BaseService<T>均为泛型类，BaseService<T>无@Injectable装饰器，各实现类使用具体模型作为T。

方案解答 #

1. 让Angular为每个组件实例注入对应服务的可行方案 #

可以通过创建包装组件的方式实现，为每个服务实现单独定义一个包装组件，在包装组件的providers中配置对应的服务映射，这样每个包装组件实例会自动注入对应的服务，app-custom-table内部直接注入BaseService即可。

示例代码：

// 针对Service1的包装组件
@Component({
  selector: 'app-custom-table-service1',
  template: '<app-custom-table (columnButtonClick)="handleColumnClick($event)"></app-custom-table>',
  providers: [{ provide: BaseService, useClass: ImplementationService1 }]
})
export class CustomTableService1Component {
  constructor(private baseService: BaseService<Model1>) {}

  handleColumnClick(event: any) {
    this.baseService.columnClicked(event);
  }
}

// 其他服务对应的包装组件类似实现

修改后的模板结构会更简洁：

<mat-tab-group>
  <mat-tab *ngIf="sees1">
    <app-custom-table-service1></app-custom-table-service1>
  </mat-tab>
  <mat-tab *ngIf="sees2">
    <app-custom-table-service2></app-custom-table-service2>
  </mat-tab>
  <!-- 其他tab对应各自的包装组件 -->
</mat-tab-group>

这种方式完全符合Angular依赖注入的设计思想，每个组件实例的服务边界清晰，易于测试和维护。

2. @Input()传服务的方式是否不可取？ #

这种方式本身是Angular中合法的组件通信手段，并非“不好”，它有自己的适用场景：

• 优点：直观易懂，无需额外创建组件，快速实现逻辑；
• 缺点：组件与服务的耦合度更高，测试时需要手动传入服务实例，若组件内部多处依赖服务，重复传递会增加冗余。

总结 #

• 如果追求低耦合、高可测试性，符合Angular DI设计规范，推荐使用包装组件+组件级提供者的方案；
• 如果是简单场景，快速迭代即可满足需求，@Input()传服务的方式完全可行，不需要强行重构。

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