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 жасаңыз, анын жардамы менен төмөнкү компонент көрсөтүлөт. Үйрөнүлгөн хуктун иштешин текшериңиз.

Ата-компонентте колдонуучу аттарынын массиви берилген. Колдонуучу менен төмөнкү компонент жасаңыз. Массивди цикл менен айланып чыгып, колдонуучулар менен компоненттерди чыгарыңыз. Басылганда массивден элементтерди өчүрө турган баскыч жасаңыз. Төмөнкү компоненттерде жок кылуу хугу ишке кирерин текшериңиз.