Angular ngOnDestroy Hooks

Hooks ngOnDestroy tiek izsaukts, kad komponents tiek noņemts. Šajā hook var atbrīvot resursus, noņemt notikumu abonementus, apturēt taimerus utt.

Komponenta izveide un noņemšana Angular notiek, kad tas reaktīvi tiek rādīts un paslēpts, izmantojot if nosacījumu. Tas nozīmē, ka Angular ne vienkārši paslēpj komponentus, bet tos noņem un pēc tam atgriež atpakaļ.

Arī komponenti tiek izveidoti un noņemti, kad tie tiek iterēti ciklos reaktīvi. Šajā gadījumā Angular arī izveido un noņem komponentus.

Izmēģināsim to praksē. Importēsim interfeisu OnDestroy:

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

Pievienosim to klasei:

export class UserComponent implements OnDestroy {
	
}

Un tagad uzrakstīsim mūsu hook:

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

Izveidojiet reaktīvu if, ar kura palīdzību tiks rādīts bērnu komponents. Pārbaudiet apgūtā hoka darbību.

Vecāku komponentā ir dots lietotāju vārdu masīvs. Izveidojiet bērnu komponentu ar lietotāju. Iterējiet masīvu ciklā un izvadiet komponentus ar lietotājiem. Izveidojiet pogu, kuras nospiešana dzesēs elementus no masīva. Pārbaudiet, vai bērnu komponentos tiks izsaukts hooks uz dzēšanu.