ჰუკი ngOnDestroy Angular-ში

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, რომლის საშუალებითაც გამოჩნდება შვილი კომპონენტი. შეამოწმეთ შესწავლილი ჰუკის მუშაობა.

მშობელ კომპონენტში მოცემულია მომხმარებელთა სახელების მასივი. შექმენით შვილი კომპონენტი მომხმარებლისთვის. გადაუარეთ მასივს ციკლით და გამოიტანეთ კომპონენტები მომხმარებლებით. შექმენით ღილაკი, რომლის დაჭერითაც მასივიდან წაიშლება ელემენტები. შეამოწმეთ, რომ შვილ კომპონენტებში გაიგზავნება წაშლის ჰუკი.