Хук ngOnDestroy в Angular

ХукngOnDestroy се задейства при премахване на компонента. В този хук можете да освободите ресурси, да премахнете абонаменти за събития на елементи, да спрете таймери и т.н.

Създаването и премахването на компонент в Angular се случва, когато той реактивно се показва и скрива с помощта на условие if. Тоест Angular не просто скрива компонентите, а ги премахва и ги връща обратно.

Също така компонентите се създават и премахват, когато те се итерират реактивно в цикли. В този случай Angular също създава и премахва компоненти.

Нека опитаме на практика. Импортирайте интерфейса OnDestroy:

app/user/user.component.tsimport { OnDestroy } from '@angular/core';

Свържете го към класа:

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  
}

А сега нека напишем нашия хук:

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  constructor() {
    console.log('constructor is started');
  }
  
  ngOnDestroy() {
    console.log('onDestroy is applied');
  }
}