javascript - Angular：如何注入抽象服務的多個實例

我對 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 的數據的組件

答案＃1

根據評論

請詳細說明。你說你想要兩者，這是什麼意思？你的意思是你希望注入的服務是兩者的結合，這樣 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