Хук 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');
  }
}