Angular：如何注入抽象服务的多个实例答案

【问题标题】：Angular: how to inject multiple instance of abstract serviceAngular：如何注入抽象服务的多个实例
【发布时间】：2020-12-22 16:47:30
【问题描述】：

我对 Angular 有点陌生，并试图理解高级开发人员编写的代码。如果我不遵守标准的沟通习惯和措辞，请原谅我。

我有一个抽象类abstractDatService 和一个抽象方法getEntities()，它的实现类为impl1 和impl2

实现类如下：

@Injectable()
export class impl1 extends abstractDatService{
  
  private entities: Modal[] = [
    {
      id: 1,
      type: "a",
      name: "a1"
    },
    {
      id: 2,
      type: "a",
      name: "a2"
    }
  ];

  public getEntities(): Observable<Modal[]> {
    return of(this.entities);
  }
}

现在，在我的模块中，我尝试将服务注入为：

  providers: [
    {
      provide: abstractDatService,
      useClass: impl1
    },
    {
      provide: abstractDatService,
      useClass: impl2
    }
  ]

在这种情况下，当我尝试获取实体时，他们只返回来自 impl2 类的实体，而不是 impl1 的实体

我希望实现返回两者。

谁能帮我解决这个问题？

编辑：

详细说明

我有一个以某种方式显示数据的组件

HEAD1
Data from impl1 // this line is a common component in which there is a ngFor on observable returned.

HEAD2
Data from impl2 // this line is a common component in which there is a ngFor on observable returned.

通用组件是显示来自 impl1 的数据和来自 impl2 的数据的组件

【问题讨论】：

请详细说明。你想要他们两个是什么意思？您的意思是您希望注入的服务是两者的组合，以便 getEntities 返回两者的元素？或者你的意思是你想在任何地方注入两者？
是的，我想以一种获取模态 impl1 和 impl2 数据的方式进行注入

标签： javascript angular typescript dependency-injection angular-directive

【解决方案1】：

根据 cmets

请详细说明。你想要他们两个是什么意思？您的意思是您希望注入的服务是两者的组合，以便 getEntities 返回两者的元素？

是的，我想以一种获取模型 impl1 和 impl2 数据的方式进行注入

你需要改变两件事。

第一个：您的提供者定义包括multi: true

providers: [
    {
      provide: AbstractionService,
      useClass: Impl1Service,
      multi: true,
    },
    {
      provide: AbstractionService,
      useClass: Impl2Service,
      multi: true,
    }
  ]

第二个：用数组处理多重注入

 constructor(@Inject(AbstractionService) impls: AbstractionService[]) {
    const obs$ = impls.map(impl => impl.getEntities());

    combineLatest(obs$).subscribe(console.log);
  }

在 stackblitz 上检查相同的内容：https://stackblitz.com/edit/angular-ivy-pwysue?file=src/app/app.module.ts

【讨论】：