Как мы знаем, подписки, созданные в компоненте, не будут уничтожены вместе с компонентом. Когда мы используем наблюдаемые объекты в RxJS и хотим подписаться на них, мы также должны помнить об отказе от подписки, чтобы предотвратить утечку памяти, или прерывать HTTP-запросы, чтобы избежать нежелательных вызовов. У меня есть для вас решение, чтобы вам больше не пришлось об этом вспоминать 🙌.
Но сначала основы 🙂
Есть несколько вариантов, которые мы можем использовать, чтобы отказаться от подписки.
1️⃣ Первый из них — просто создать массив и запихнуть туда свои подписки, а в методе жизненного цикла ngOnDestroy() просто отписать их все. Вот пример:
2️⃣ Второй очень похожий способ — создать переменную типа Subscription и добавить к ней подписки. На мой взгляд, это решение лучше, чем предыдущее, потому что вам нужно использовать только метод unsubscribe() и все добавленные подписки будут уничтожены, вам не нужно использовать цикл и отписываться для каждой из них. Это будет выглядеть так:
3️⃣ Последний пример и мой любимый ⭐️ — использовать переменную типа Subject<void>. Здесь не нужно нажимать или добавлять какие-либо подписки. Вместо этого мы используем оператор takeUntil() из библиотеки RxJS, но также нам нужно не забыть уничтожить наши подписки в ngOnDestroy(). Для этого решения см. Код ниже 👇
Большой! 🤩
У нас есть несколько решений, чтобы следить за нашими подписками, чтобы не было утечек памяти, но что, если мы можем сделать лучше?
Что, если нам не нужно помнить об отписке и всегда писать один и тот же код в ngOnDestroy(), потому что это будет сделано автоматически.
Вы не верите? 👀 Посмотрите пример этого замечательного декоратора недвижимости ниже 👇
Декоратор @AutoDestroy 🔥
Это решение работает только с третьим методом выше. Если вы предпочитаете использовать один из первых двух методов, ничего страшного, просто перепишите этот декоратор, чтобы он выполнял методы, использованные в ngOnDestroy().
Полный код декоратора @AutoDestroy будет выглядеть так:
Если вы хотите использовать этот декоратор в компоненте, вы можете сделать это так:
Итак, как это работает? Это очень просто!
Проверьте это ниже 👇
Как это работает? 🤔
Чтобы использовать декоратор @AutoDestroy, нам просто нужно добавить его перед нашей переменной destroy$ типа Subject<void>. Благодаря этому компонент и имя этой переменной будут переданы нашему декоратору. Основная цель этого декоратора — перезаписать метод жизненного цикла ngOnDestroy() своим собственным. Очень важно проверить, нет ли у этого компонента уже собственного ngOnDestroy(), потому что без него мы потеряем исходный вызов. Итак, если компонент имеет свой собственный ngOnDestroy(), мы просто вызываем его здесь, затем уничтожаем наши подписки, и все.
Легко, верно? 😎
Вам больше не нужно помнить об отмене подписки, просто используйте @AutoDestroy декоратор свойств 🔥.
Подведение итогов
Я надеюсь, что эта статья поможет вам решить проблемы с подписками. Если вы хотите протестировать его, проверьте его на StackBlitz ⚡️ или просмотрите исходный код на Github 🎓.
Если вам понравилось это читать, пожалуйста, хлопните в ладоши 👏 . Не стесняйтесь подписываться на меня и оставлять комментарии с вашими отзывами 👇.
