Наследование компонентов в Angular: простой способ решить проблему с Dependency Injection

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.

Итак, собственно проблема: порой у нас в проекте есть много похожих компонентов, с одинаковой логикой, одинаковыми DI, свойствами итд и возникает мысль: а почему бы не вынести все это дело в базовый компонент (точнее директиву) абстрактным классом, а остальные компоненты уже наследовать? На самом деле мысль хорошая, принцип DRY соблюдается, имеем один источник истины, при изменении той самой общей логики не придется прыгать по всем компонентам итд.

Но есть один нюанс: эти злосчастные конструкторы. Нужно в каждом наследуемом компоненте передавать все DI в конструктор родителя.

constructor ( 
	customService: CustomService, 
	additionalService: AdditionalService
) {
		super(customService, additionalService)
}

выглядит не очень, но это полбеды. Беда в том, что если у нас в базовом классе добавляется DI, нам придется прыгать по всем компонентам-наследникам и добавлять эту зависимость в конструктор. Плакал наш DRY :-))

Попробуем сделать по другому: вместе с базовым компонентом создадим Injectable-класс, куда завернем все зависимости. И заинжектим его в базовый класс

@Injectable()
export class MyBaseComponentDependences {
		constructor(
    	public customService: CustomService,
      public additionalService: AdditionalService
      ) {}    
}
@Directive()
export abstract class MyBaseComponent<T> {

		//Пример использования сервиса в родительском классе
		shareEntity = this.deps.additionalService.getShare()
    
		protected constructor(
    	public deps: MyBaseComponentDependences
     ) {}
}

Класс-наследник будет выглядеть так

@Component({providers: [MyBaseComponentDependences] })
export class MyChildComponent extends MyBaseComponent<MyDto> {
		
    //Пример использования сервиса в классе-наследнике
    customEntity = this.deps.customService.getEntity()
    
    constructor(deps: MyBaseComponentDependences) {
    	super(deps);
     }
}

Теперь, если у нас в базовый класс добавляется DI мы меняем только класс MyBaseComponentDependences, все остальное остается как есть. Проблема решена

PS: однако я считаю, что наследование компонентов в Ангуляре стоит использовать только в том случае, когда это действительно необходимо, и нет возможности или не целесообразно выносить общую логику в сервисы, отдельные классы или директивы аттрибутов.

Источник: https://habr.com/ru/post/544590/


Интересные статьи

Интересные статьи

Эффективность в обучении в современном кинематографе часто подается как суперспособность. Спецагенты запоминают кучу нужной инфы. Всякие люди икс анализируют инфу с невоз...
Разработка UI-компонентов — одна из самых затратных задач при разработке фронтенда. Чтобы оптимизировать процессы, некоторые компании поручают её выделенной команде. Мы же решили ...
Привет, Хабр. Сегодня в большом числе проектов домашней (и не только) автоматизации используется Raspberry Pi. При этом достаточно удобно иметь не только прямой доступ к устройству, но и испол...
В мае этого года я участвовал в качестве игрока в MMO-мероприятии KatherineOfSky. Я заметил, что когда количество игроков достигает определённого числа, через каждые несколько минут часть из ни...
С версии 12.0 в Bitrix Framework доступно создание резервных копий в автоматическом режиме. Задание параметров автоматического резервного копирования производится в Административной части на странице ...