Angular-дағы ngOnDestroy хукі

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');
  }
}
Задание 1

Қосалқы компонент көрсетілетін реактивті if жасаңыз. Зерттелген хуқтың жұмысын тексеріңіз.

Задание 2

Аталық компонентте пайдаланушы атауларының массиві берілген. Пайдаланушымен қосалқы компонент жасаңыз. Массивті циклмен қайталап, пайдаланушылармен компоненттерді шығарыңыз. Массивтен элементтерді жойып жіберетін батырманы жасаңыз. Қосалқы компоненттерде жою үшін хуқтың іске қосылатынын тексеріңіз.