Angular'da ngOnDestroy Kancası

ngOnDestroy kancası, bileşen kaldırıldığında tetiklenir. Bu kancada kaynakları serbest bırakabilir, eleman olaylarına olan abonelikleri silebilir, zamanlayıcıları temizleyebilirsiniz vb.

Angular'da bir bileşenin oluşturulması ve kaldırılması, if koşulu ile reaktif bir şekilde gösterilip gizlendiğinde gerçekleşir. Yani Angular bileşenleri sadece gizlemez, onları kaldırır ve geri getirir.

Ayrıca, bileşenler döngüler içinde reaktif olarak tekrarlandığında da oluşturulur ve kaldırılır. Bu durumda da Angular bileşenleri oluşturur ve kaldırır.

Pratikte deneyelim. OnDestroy arayüzünü içe aktaralım:

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

Onu sınıfa bağlayalım:

export class UserComponent implements OnDestroy {
	
}

Şimdi kancamızı yazalım:

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

Bir alt bileşeni gösterecek şekilde reaktif bir if yapın. Öğrenilen kancanın çalışmasını kontrol edin.

Ana bileşende bir kullanıcı adları dizisi verilmiştir. Kullanıcı için bir alt bileşen yapın. Diziyi bir döngü ile tekrarlayın ve kullanıcı bileşenlerini çıktı olarak verin. Dizi öğelerini kaldıracak bir buton yapın. Alt bileşenlerde yok etme kancasının tetiklendiğini kontrol edin.