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

У бацькоўскім кампаненце дадзены масіў імёнаў карыстальнікаў. Зрабіце даччыны кампанент з карыстальнікам. Перабярыце масіў цыклам і выведзіце кампаненты з карыстальнікамі. Зрабіце кнопку, па націску на якую будуць выдаляцца элементы з масіва. Праверце, што ў даччыных кампанентах будзе спрацоўваць хук на выдаленне.