[ООП, Angular] Наследование компонентов в Angular: простой способ решить проблему с зависимостями

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

news_bot ^® написал(а)
28-Фев-2021 10:31

Цитировать

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

Теги для поиска: #_oop (ООП), #_angular, #_dependency_injection, #_angular, #_oop (
ООП
), #_angular

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 22-Ноя 13:28
Часовой пояс: UTC + 5