Angular-da ngOnDestroy Hooki

ngOnDestroy hooki komponent o'chirilganda ishga tushadi. Ushbu hookda resurslarni bo'shatish, elementlar hodisalariga obuna bo'lishni to'xtatish, taymerlarni to'xtatish va h.k. amallarni bajarish mumkin.

Angular-da komponent yaratilishi va o'chirilishi if sharti orqali reaktiv ravishda ko'rsatilganda va yashirilganda sodir bo'ladi. Ya'ni Angular komponentlarni oddiygina yashirmaydi, balki ularni o'chiradi va qaytadan qaytaradi.

Shuningdek, komponentlar tsikllarda reaktiv ravishda takrorlanganda ham yaratiladi va o'chiriladi. Bu holatda ham Angular komponentlarni yaratadi va o'chiradi.

Keling, amaliyotda sinab ko'raylik. OnDestroy interfeysini import qilamiz:

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

Uni klassga ulaymiz:

export class UserComponent implements OnDestroy {
	
}

Endi bizning hookimizni yozamiz:

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

if yordamida reaktiv qiling, uning orqali bola komponent ko'rsatilsin. O'rganilgan hookning ishlashini tekshiring.

Ota komponentda foydalanuvchilar ismlari massivi berilgan. Foydalanuvchi uchun bola komponent yarating. Massivni tsikl bilan aylantiring va foydalanuvchilar bilan komponentlarni chiqaring. Massivdan elementlarni o'chiradigan tugma yarating. Bola komponentlarda o'chirish hooki ishlayotganini tekshiring.