Как стать автором
Обновить

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

Время на прочтение2 мин
Количество просмотров7.4K

Итак, собственно проблема: порой у нас в проекте есть много похожих компонентов, с одинаковой логикой, одинаковыми 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: однако я считаю, что наследование компонентов в Ангуляре стоит использовать только в том случае, когда это действительно необходимо, и нет возможности или не целесообразно выносить общую логику в сервисы, отдельные классы или директивы аттрибутов.

Теги:
Хабы:
+6
Комментарии7

Публикации

Изменить настройки темы

Истории

Работа

Ближайшие события

PG Bootcamp 2024
Дата16 апреля
Время09:30 – 21:00
Место
МинскОнлайн
EvaConf 2024
Дата16 апреля
Время11:00 – 16:00
Место
МоскваОнлайн
Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн