Angular-дағы ngOnDestroy хукі

ngOnDestroy хукі компонент жойылған кезде іске қосылады. Бұл хуқта ресурстарды босатуға, элемент оқиғаларына жазылуды жоюға, таймерлерді тоқтатуға және т.б. болады.

Angular-да компоненттің жасалуы мен жойылуы ол if шарты арқылы реактивті түрде көрсетілгенде және жасырылғанда болады. Яғни Angular компоненттерді жай ғана жасырмайды, оларды жойып, қайта қайтарады.

Сондай-ақ, компоненттер циклдарда реактивті түрде қайталаналғанда да жасалып, жойылады. Бұл жағдайда да Angular компоненттерді жасап және жояды.

Практикада көрейік. OnDestroy интерфейсін импорттайық:

import { OnDestroy } from '@angular/core';

Оны класқа қосайық:

export class UserComponent implements OnDestroy {
	
}

Енді біздің хуқты жазайық:

export class UserComponent implements OnDestroy {
	constructor() {
		console.log('constructor is started');
	}
	
	ngOnDestroy() {
		console.log('onDestroy is applied');
	}
}

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

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