Angular-da ngOnDestroy Hook-u

ngOnDestroy hook-u komponent silindiyi zaman işleyir. Bu hook-da resursları azad ede, element hadiselerine olan abuneliyi silə, taymerleri dayandıra ve s. ede bilersiniz.

Angular-da komponentin yaradılması ve silinmesi, komponent if şerti ile reaktiv şəkildə gösterildiyinde ve gizlədildiyinde baş verir. Yəni Angular komponentleri sadəcə gizletmir, onları silir ve geri qaytarır.

Həmçinin, komponentler dövrlerde reaktiv şəkildə dəyişdirildiyinde de yaranır ve silinir. Bu zaman da Angular komponentleri yaradır ve silir.

Gəlin praktik olaraq yoxlayaq. OnDestroy interfeysini import edək:

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

Onu klasa bağlayaq:

export class UserComponent implements OnDestroy {
	
}

İndi isə hookumuzu yazaq:

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

Uşaq komponentin göstəriləcəyi reaktiv if hazırlayın. Öyrenilmiş hookun işlemesini yoxlayın.

Ana komponentde istifadəçi adlarından ibarət massiv verilib. İstifadəçi üçün uşaq komponent hazırlayın. Massivi dövrle işlederek istifadəçi komponentlerini çıxardın. Kliklenende massivin elementlerini silen düyme yaradın. Uşaq komponentlerinde silinme hookunun işlediyini Yoxlayın.