Угловой интерфейс для службы в селекторе HTML

Как правило, внедрение зависимостей — это статический процесс. Если вы хотите, чтобы все оставалось статичным, вы можете иметь два компонента <app-search-female-component> и <app-search-male-component>, объявленные следующим образом.

// <app-search-female-component>
constructor(
    private searchService:SearchInFemaleEmployeeService
) {}

// <app-search-male-component>
constructor(
    private searchService:SearchInMaleEmployeeService
) {}

Или объявите один поисковый компонент с параметром, указывающим тип службы, которую вы хотите использовать.

// <app-search-component type="male">
@Input()
public type: string;
constructor(
    private maleSearchService:SearchInFemaleEmployeeService,
    private femaleSearchService:SearchInMaleEmployeeService,
) {}

Есть много способов добиться желаемого. Я бы предпочел второй, потому что мы размещаем выбор службы внутри компонента. Я имею в виду, что в какой-то момент вам придется указать программно и динамически, какой тип поиска вы хотите выбрать, и хорошо, если он где-то изолирован. Чем меньше переключений, тем лучше :)

Изменить: я понимаю, что здесь у вас будет 20-30 служб, поэтому вы не хотите вводить 20-30 служб в свой поисковый компонент. Затем вы можете создать службу SelectorService, используемую для выбора используемой службы поиска. При этом внедрение 20-30 сервисов выполняется только один раз, в SelectorService и ваш компонент внедряет только один сервис.

// SelectorService
constructor(
    private maleSearchService:SearchInFemaleEmployeeService,
    private femaleSearchService:SearchInMaleEmployeeService,
    ...
) {}

selectSearchService(type: string): ISearchService {
    switch (type) {
    ....
    }
}

// <app-search-component type="male">
@Input()
public type: string;
constructor(
    private selector:SelectorService,
) {}