Angular: как внедрить несколько экземпляров абстрактного сервиса

#javascript #angular #typescript #dependency-injection #angular-directive

#javascript #angular #typescript #внедрение зависимостей #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 возвращал элементы из обоих? Или вы имеете в виду, что хотите внедрить оба в любом месте?

2. Да, я хочу внедрить таким образом, чтобы я получал данные как для модальных impl1, так и для impl2

Ответ №1:

Согласно комментариям

Пожалуйста, уточните. что вы имеете в виду, говоря, что хотите их обоих? Вы имеете в виду, что хотите, чтобы внедренный сервис был комбинацией обоих, чтобы getEntities возвращал элементы из обоих?

Да, я хочу внедрить таким образом, чтобы я получал данные для обеих моделей impl1 и impl2

Вам нужно изменить 2 вещи.

1-е: определение вашего провайдера, которое должно включать multi: true

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

2-й: обработайте множественную инъекцию с помощью массива

  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