Как заменить внедренный Сервис в шаблоне angular при использовании из другого компонента

Question

Я новичок в Angular. У меня есть несколько диалоговых окон, которые выглядят одинаково и различаются по серверной службе, с которой они общаются.

Я написал шаблон для диалога BaseDialogComponenet с BaseService для связи. Теперь я хочу повторно использовать BaseDialogComponent в другом theOtherComponenet с другим Сервисом. Как я могу заменить BaseService, введенный в BaseDialogComponenet.ts, на мой ModifiedService в theOtherComponenet. Исходя из Java и Spring World, я бы позволил BaseService и ModifiedService реализовать интерфейс с требуемыми методами, а затем заменить Сервисы с помощью квалификатора

Как заменить внедренную службу в шаблоне на angular

Answer 1

Если я правильно понял, вы могли бы сделать так:

Ваш BaseDialogComponent:

@Component({})
export class BaseDialogComponent {
    constructor(base: BaseService) {}
}

Ваш theOtherComponent:

@Component({
    selector: 'app-other-comp',
    template: '<app-base-diag></app-base-diag>',
    providers: [{provide: BaseService, useClass: ModifiedService}]
})
export class theOtherComponent {
   constructor(){}
} 

Делая это, вы говорите Инжектор зависимостей для предоставления ModifiedService вместо BaseService для всех дочерних компонентов вашего theOtherComponent.

. Для более подробной информации о том, как это работает, я позволю вам прочитать документацию angular: https://angular.io/api/core/Directive#providers https://angular.io/guide/dependency-injection-providers

Редактировать:

Как указано @ enno.void, новый экземпляр вашего ModifiedService будет создаваться для каждого theOtherComponent. Вместо этого вы можете использовать: {provide: BaseService, useExisting: ModifiedService}, который будет использовать тот же ModifiedService, созданный DI в root.