Το Hook ngOnDestroy στο Angular

Το hook ngOnDestroy ενεργοποιείται κατά την αφαίρεση ενός component. Σε αυτό το hook μπορείτε να απελευθερώσετε πόρους, να αφαιρέσετε εγγραφές σε γεγονότα στοιχείων, να σταματήσετε χρονοδιακόπτες κ.λπ.

Η δημιουργία και η αφαίρεση ενός component στο Angular συμβαίνει όταν αυτό εμφανίζεται και αποκρύπτεται αντιδραστικά χρησιμοποιώντας την συνθήκη if. Δηλαδή, το Angular δεν απλά κρύβει τα components, αλλά τα αφαιρεί και τα επαναφέρει πίσω.

Επίσης, τα components δημιουργούνται και αφαιρούνται, όταν επαναλαμβάνονται αντιδραστικά σε βρόχους. Σε αυτή την περίπτωση το Angular επίσης δημιουργεί και αφαιρεί components.

Ας δοκιμάσουμε στην πράξη. Εισάγουμε την διεπαφή OnDestroy:

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

Συνδέουμε την κλάση:

export class UserComponent implements OnDestroy {
	
}

Και τώρα γράφουμε το hook μας:

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

Δημιουργήστε έναν αντιδραστικό if με τον οποίο θα εμφανίζεται ένα παιδί component. Ελέγξτε τη λειτουργία του hook που μάθαμε.

Στο γονικό component δίνεται ένας πίνακας με ονόματα χρηστών. Δημιουργήστε ένα παιδί component για τον χρήστη. Επαναλάβετε τον πίνακα με βρόχο και εμφανίστε τα components με τους χρήστες. Δημιουργήστε ένα κουμπί, πατώντας το οποίο θα διαγράφονται στοιχεία από τον πίνακα. Ελέγξτε ότι στα παιδιά components θα ενεργοποιείται το hook για αφαίρεση.