Angular-ի ngOnDestroy հուքը

ngOnDestroy հուքն աշխատում է, երբ կոմպոնենտը հեռացվում է: Այս հուքում դուք կարող եք ազատել ռեսուրսները, հեռացնել տարրերի իրադարձությունների բաժանորդագրությունը, դադարեցնել թայմերները և այլն:

Կոմպոնենտի ստեղծումն ու հեռացումը Angular-ում տեղի է ունենում, երբ այն ռեակտիվ ցուցադրվում է կամ թաքնվում if պայմանի միջոցով: Այսինքն՝ Angular-ը պարզապես չի թաքցնում կոմպոնենտները, այլ հեռացնում է դրանք և հետ վերադարձնում:

Բացի այդ, կոմպոնենտները ստեղծվում և հեռացվում են, երբ դրանք ռեակտիվ կերպով վերադասավորվում են ցիկլերում: Այս դեպքում Angular-ը նույնպես ստեղծում և հեռացնում է կոմպոնենտները:

Եկեք փորձենք գործնականում: Ներմուծենք OnDestroy ինտերֆեյսը:

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

Միացնենք այն դասին:

export class UserComponent implements OnDestroy {
	
}

Իսկ հիմա գրենք մեր հուքը:

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

Կատարեք ռեակտիվ if, որի միջոցով կցուցադրվի child կոմպոնենտը: Ստուգեք ուսումնասիրված հուքի աշխատանքը:

Ծնող կոմպոնենտում տրված է օգտատերերի անունների զանգված: Ստեղծեք child կոմպոնենտ օգտատիրոջ համար: Զանգվածը ցիկլով վերադասավորեք և արտածեք օգտատերերի կոմպոնենտները: Ստեղծեք կոճակ, որի սեղմման դեպքում զանգվածից տարրերը կհեռացվեն: Ստուգեք, որ child կոմպոնենտներում հեռացման հուքը կաշխատի: