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

Во родителската компонента е даден низа од имиња на корисници. Направете детска компонента со корисник. Прелистајте ја низата со јамка и прикажете компоненти со корисници. Направете копче, при кликнување на кое ќе се отстрануваат елементи од низата. Проверете дека во детските компоненти ќе се активира хукот за отстранување.