Angular ရှိ ngOnDestroy Hook

Hook ngOnDestroy သည် Component ဖယ်ရှားခံရသောအခါတွင် အလုပ်လုပ်သည်။ ဤ hook ထဲတွင် Resource များကို လွှတ်ပေးခြင်း၊ Element အချို့၏ Event များအား Subscribe လုပ်ထားခြင်းကို ဖျက်သိမ်းခြင်း၊ Timer များကို ရပ်တန့်ခြင်းစသည့် လုပ်ဆောင်ချက်များ လုပ်ဆောင်နိုင်သည်။

Angular ထဲတွင် Component ဖန်တီးခြင်းနှင့် ဖျက်သိမ်းခြင်းသည် ၎င်း Component အား if အခြေအနေတစ်ခုဖြင့် Reactively ပြသခြင်း၊ ဝှက်ထားခြင်း ပြုလုပ်သောအခါ ဖြစ်ပေါ်သည်။ ဆိုလိုသည်မှာ Angular သည် Component များကို ရိုးရိုးဝှက်ထားခြင်းမဟုတ်ဘဲ ၎င်းတို့ကို ဖျက်သိမ်းပြီး နောက်တစ်ကြိမ် ပြန်လည်ပြသသည့်အခါ ပြန်လည်ဖန်တီးပေးခြင်းဖြစ်သည်။

ထို့အပြင် Component များကို Loop များထဲတွင် Reactive အနေဖြင့် ဖြတ်သန်းပြသောအခါတွင်လည်း ဖန်တီးခြင်းနှင့် ဖျက်သိမ်းခြင်းများ ဖြစ်ပေါ်သည်။ ဤသို့သောအခြေအနေတွင် Angular သည် Component များကို ဖန်တီးခြင်းနှင့် ဖျက်သိမ်းခြင်းများ ပြုလုပ်သည်။

လက်တွေ့စမ်းကြည့်ကြရအောင်။ Interface OnDestroy ကို Import လုပ်ပါမည်။

import { OnDestroy } from '@angular/core';

၎င်းကို Class နှင့် ချိတ်ဆက်ပါမည်။

export class UserComponent implements OnDestroy {
	
}

ယခု ကျွန်ုပ်တို့၏ Hook ကို ရေးသားကြပါစို့။

export class UserComponent implements OnDestroy {
	constructor() {
		console.log('constructor is started');
	}
	
	ngOnDestroy() {
		console.log('onDestroy is applied');
	}
}

Reactive if တစ်ခု ပြုလုပ်ပါ။ ၎င်းမှတစ်ဆင့် Child Component တစ်ခုကို ပြသနိုင်ရမည်။ လေ့လာထားသော Hook ၏ အလုပ်လုပ်ပုံကို စမ်းသပ်ကြည့်ပါ။

Parent Component ထဲတွင် User အမည်များ Array တစ်ခု ရှိသည်။ User ပါဝင်သော Child Component တစ်ခု ဖန်တီးပါ။ Array ကို Loop ဖြင့်ဖြတ်ကာ User Component များကို ထုတ်ပြပါ။ Array ထဲမှ Element များကို ဖျက်သိမ်းပေးမည့် Button တစ်ခု ပြုလုပ်ပါ။ Child Component များထဲတွင် ဖျက်သိမ်းခြင်း Hook အလုပ်လုပ်ပုံကို စမ်းသပ်ကြည့်ပါ။