Angular 2 — несколько экземпляров службы с параметрами в одном компоненте

Question

Введение в структуру моего приложения: у меня естьlists-serviceкоторый обрабатывает списки из API, стандартизированные для столбцов и строк. Он включает в себя отображение, сортировку, разбиение на страницы и другие функции.

Для каждого API я создал дочернюю службу (которая расширяетListsService), например для списка пользователей -UsersListService, действия -ActionsListServiceи так далее.

Эти дочерние службы имеют свои собственные данные и некоторые дополнительные функции, специфичные для каждой из них.

Эти сервисы предоставляются в корне, поскольку они внедряются не только в каждый компонент страницы, но и в компоненты боковой панели.

Более конкретно: у меня есть:

      @Injectable({
  providedIn: 'root'
})
export class LicenseListService extends ListsService {....}

Он вводится вUserLicenseComponent(компонент маршрута)

        constructor(...
    public licenseList: LicenseListService,
... ) {...}

Но и вLicenseSidebarComponent, который используется в другом месте.

Что мне нужно

Мне нужно 2 экземпляра этого, они будут использовать одни и те же входные данные (из одного и того же API), но в одном у меня будут активные лицензии, а в другом - лицензии с истекшим сроком действия (чтобы обе таблицы могли отображаться одновременно.

Один из способов сделать это — создать дочерние службы изLicenseListService, но я бы предпочел иметь 2 экземпляра одной и той же службы, но с параметром состояния (status = 'active' или status = 'expired').

Как лучше всего это сделать?

Я видел некоторые частичные решения (моей проблемы) в stackoverflow, но мне нужно объединить их в полное решение.

Answer 1

вы можете использовать его в том же компоненте:

в модуле приложения:

      providers: [
    { provide: 'instance1', useClass: DataService },
    { provide: 'instance2', useClass: DataService },
  ]

в вашем компоненте:

      constructor(
    @Inject('instance1') private service1: DataService,
    @Inject('instance2') private service2: DataService
  ) {}

Обновлять:

если вы хотите инициализировать свои службы некоторыми данными, вы должны использовать пользовательских поставщиков:

в модуле приложения:

      export function instance1Provider(): DataService {
  const dataService1 = new DataService();
  dataService1.status = 'status1';
  return dataService1;
}
export function instance2Provider(): DataService {
  const dataService2 = new DataService();
  dataService2.status = 'status2';
  return dataService2;
}

export const instance1 = new InjectionToken<DataService>('instance1');
export const instance2 = new InjectionToken<DataService>('instance2');

providers: [
    { provide: instance1, useFactory: instance1Provider },
    { provide: instance2, useFactory: instance2Provider },
  ],

в вашем компоненте:

      constructor(
    @Inject(instance1) private service1: DataService,
    @Inject(instance2) private service2: DataService
  ) {}

это пример в stackblitz.