Применение декораторов в Angular. «RxjsAutoUnsubscribe»
Поскольку Angular
поставляется совместно с языком программирования TypeScript
, то нам становится доступна возможность применения декораторов. Декоратор - это шаблон проектирования, который позволяет динамически добавлять функциональность к уже существующему коду, не изменяя его логику.
Чем это полезно?
Angular
довольно тесно интегрирован с реактивной библиотекой событийного программирования RxJS Observables
и системой управления состоянием NgRx
. Одна из лучших практик применения Observables
в такой связке - отписка от событий.
Если не производить отписку от событий, то в какой-то момент приложение будет использовать чрезмерно много системной памяти, что приведет к ошибкам и зависаниям системы. см. demo
Хорошей практикой решения этой проблемы является отписка от событий при завершении работы компонента (в жизненном цикла приложения - это хук ngOnDestroy
)
1 | @Component({ |
Данный вариант решения создает лишнюю ментальную нагрузку. Добавляя новое Observable
поле нужно дополнительно помнить, что если мы подписались на него, то нужно не забыть отписаться, иначе начнутся проблемы. Существует более элегантное решение, которое основано на применении декораторов.
Декоратор представляет собой функцию, которая исполняется перед выполнением целевой функции или конструктора класса. В нашем случае мы будем применять декоратор на класс. Функция - декоратор представлена ниже.
1 | export function rxjsAutoUnsubscribe(constructor: any) { |
Таким образом, если метод rxjsAutoUnsubscribe
найдет у класса поля, у которых есть метод unsubscribe
, то при завершении работы приложения (выполнении хука ngOnDestroy
) произойдет автоматическая отписка от событий.
Пример целиком:
1 | ({ |