Angular Academy · Урок

ngOnDestroy и очистка

Освобождайте ресурсы при удалении компонента.

«ngOnDestroy и очистка» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Почему важна очистка

Когда компонент удаляется из DOM, оставшиеся подписки, таймеры или обработчики событий могут привести к утечкам памяти. Хук OnDestroy предназначен для их очистки.

Реализация OnDestroy

Реализуйте OnDestroy и добавьте метод ngOnDestroy. Angular вызывает его непосредственно перед уничтожением компонента.

import { Component, OnDestroy } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnDestroy {
  ngOnDestroy(): void {
    console.log("cleaning up");
  }
}

Отмена подписок на наблюдаемые объекты

Подписки, созданные вручную, необходимо отменять, чтобы избежать утечек. Сохраните объект Subscription и вызовите unsubscribe в ngOnDestroy.

private sub!: Subscription;

ngOnInit() {
  this.sub = this.timer$.subscribe(t => this.tick = t);
}

ngOnDestroy() {
  this.sub.unsubscribe();
}

Управление несколькими подписками

Можно объединить подписки в один родительский объект Subscription и отменить их все одновременно.

private subs = new Subscription();

ngOnInit() {
  this.subs.add(this.a$.subscribe());
  this.subs.add(this.b$.subscribe());
}

ngOnDestroy() {
  this.subs.unsubscribe();
}

Шаблон takeUntil

Популярный шаблон RxJS использует Subject уничтожения вместе с takeUntil, благодаря чему потоки автоматически завершаются при уничтожении компонента.

private destroy$ = new Subject<void>();

ngOnInit() {
  this.data$.pipe(takeUntil(this.destroy$))
    .subscribe(d => this.data = d);
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

Использование takeUntilDestroyed

Современный Angular предоставляет takeUntilDestroyed из @angular/core/rxjs-interop. Этот оператор связывает поток с жизненным циклом компонента без ручной очистки.

import { takeUntilDestroyed } from "@angular/core/rxjs-interop";

constructor() {
  this.data$.pipe(takeUntilDestroyed())
    .subscribe(d => this.data = d);
}

Альтернатива с каналом async

Использование канала async в шаблоне полностью избавляет от ручного управления подписками, поскольку канал автоматически отменяет подписку при уничтожении.

<p>{{ data$ | async }}</p>

Очистка таймеров и интервалов

Встроенные таймеры не управляются Angular. Очищайте их в ngOnDestroy, чтобы после уничтожения компонента не выполнялись обратные вызовы.

private id!: number;

ngOnInit() {
  this.id = window.setInterval(() => this.tick(), 1000);
}

ngOnDestroy() {
  clearInterval(this.id);
}

Удаление обработчиков событий

Если Вы вручную добавляете обработчики событий DOM, удаляйте их при уничтожении, чтобы предотвратить утечки и вызовы устаревших обработчиков.

private onScroll = () => this.handle();

ngOnInit() {
  window.addEventListener("scroll", this.onScroll);
}

ngOnDestroy() {
  window.removeEventListener("scroll", this.onScroll);
}

DestroyRef для обратных вызовов

Можно внедрить DestroyRef и зарегистрировать обратный вызов onDestroy; это удобно в сервисах и контекстах, не связанных с компонентами.

constructor(private destroyRef: DestroyRef) {
  const id = setInterval(() => {}, 1000);
  this.destroyRef.onDestroy(() => clearInterval(id));
}

Что вызывает ngOnDestroy

ngOnDestroy выполняется, когда компонент удаляется в результате маршрутизации, структурной директивой вроде *ngIf или при уничтожении родительского компонента.

Быстрая проверка

Проверьте, насколько хорошо Вы поняли OnDestroy.

Итоги

Хук OnDestroy освобождает подписки, таймеры и обработчики. Используйте unsubscribe, шаблон takeUntil, takeUntilDestroyed, асинхронный канал async или DestroyRef, чтобы предотвратить утечки памяти.

Часто задаваемые вопросы

Урок «ngOnDestroy и очистка» бесплатный?

Да — полный текст урока «ngOnDestroy и очистка» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «ngOnDestroy и очистка»?

Освобождайте ресурсы при удалении компонента. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «ngOnDestroy и очистка»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy