PassFront
  1. PassFront
  2. База знаний
  3. Жизненный цикл

Зачем нужен ngOnDestroy и как правильно отписываться от Observable?

Жизненный цикл

`ngOnDestroy` вызывается перед удалением компонента, и в нём освобождают ресурсы: подписки, таймеры, обработчики событий.

Проблема

Подписка на долгоживущий Observable (интервал, WebSocket, Subject из сервиса) продолжает работать после удаления компонента. Колбэк обращается к уничтоженному компоненту и создаёт утечку памяти.

Способы

// 1. async pipe: Angular сам подписывается и отписывается
// template: {{ user$ | async }}

// 2. takeUntilDestroyed (Angular 16+)
constructor() {
  this.store.updates$
    .pipe(takeUntilDestroyed())
    .subscribe((u) => this.apply(u));
}

// 3. Subject и takeUntil (старый способ)
private destroy$ = new Subject<void>();
ngOnInit() { this.data$.pipe(takeUntil(this.destroy$)).subscribe(); }
ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); }

Когда отписка не нужна

HTTP-запросы через HttpClient завершаются сами после ответа, поэтому достаточно подписки без очистки.

Коротко для собеседования

Предпочтительно async pipe или takeUntilDestroyed. Бесконечные потоки нужно отписывать вручную, HTTP-запросы нет.

Другие вопросы раздела