Хук 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 с помощта на който ще се показва детски компонент. Проверете работата на изучения хук.

В родителския компонент е даден масив от имена на потребители. Направете детски компонент с потребител. Обходете масива с цикъл и изведете компоненти с потребители. Направете бутон, при натискането на който ще се изтриват елементи от масива. Проверете, че в детските компоненти ще се задейства хук за изтриване.