What is an Observable?
Observable ဆိုတာ data source တစ်ခုပါပဲ၊ ဥပမာအားဖြင့် user ဆီက event တွေ Http requests တွေနဲ့ ကိုယ်တိုင်ရေးသားထားတဲ့ code တွေကနေ ရရှိလာတဲ့ data တွေကို တစ်ကြိမ်ထပ်မက ထုတ်လွှင့်ပေးနိုင်တဲ့ စနစ်တစ်ခုပဲ ဖြစ်ပါတယ်။
ထုတ်လွှင့်လိုက်တဲ့ data တွေကို လက်ခံရယူလိုသူ (Observer) တွေက subscribe လုပ်ထားချင်းဖြင့် ရယူနိုင်ပါတယ်။
Observable ကနေ data တွေအပြင် error နဲ့ ထုတ်လွှင့်မှုပြီးဆုံးကြောင်း (completion) တွေပါ ထုတ်လွှင့်နိုင်တာကြောင့် subscribe လုပ်ထားသူတွေက ရရှိလာတဲ့ ထုတ်လွှင့်မှုအပေါ်မူတည်ပြီး လိုသလို အသုံးချနိုင်မှာ ဖြစ်ပါတယ်။
Angular က RxJS ရဲ့ Observer pattern ကိုအသုံးပြုထားတာကြောင့် အသေးစိတ်လေ့လာလိုပါက ဒီမှာ လေ့လာနိုင်ပါတယ်။
Using Observable
Observable တချို့ကိုရှေ့မှာ အသုံးပြုခဲ့ကြပါတယ်။ ဥပမာအားဖြင့် route ရဲ့ params ပါ။ အောက်ပါ code ကိုကြည့်ရင် မှတ်မိမှာပါ။
လက်တွေ့မြင်နိုင်စေဖို့အတွက် Observable တစ်ခုကို အခုလို အသုံးပြုကြပါမယ်။ HomeComponent ကိုဖွင့်ပြီး အခုလိုရေးပါ။
import { interval } from 'rxjs';ngOnInit() {
interval(1000).subscribe((count: number) => {
console.log(count);
});
}
interval ဆိုတာ Observable တစ်ခုဖြစ်ပါတယ်။ rxjs ကနေ import လုပ်ပေးဖို့လိုအပ်ပါတယ်။ interval ကို subscribe လုပ်လိုက်ပြီးရလာတဲ့ data ကို log ထုတ်ထားပါတယ်။
အားလုံးပြီးရင်တော့ run လိုက်ပါ။ home tab ကိုနှိပ်လိုက်ရင် console မှာ count တွေထွက်လာတာ တွေ့ရမှာပါ။
Home tab ကနေတခြား tab တစ်ခုကို နှိပ်ကြည့်ပါ။
count တွေဆက်ပြီးသွားနေတာ တွေ့ရမှာပါ။ ဘာဖြစ်လို့လဲဆိုတော့ observable တွေကို subscribe လုပ်လိုက်ရင် component မရှိတော့လည်း ဆက်ပြီးတော့ subscribe လုပ်ပေးနေလို့ပဲဖြစ်ပါတယ်။
ဒါကြောင့် component မရှိတော့တဲ့အခါ subscribe လုပ်ထားတာကိုရပ်ဖို့ အခုလိုပြင်ရေးပါ။
import { interval, Subscription } from 'rxjs';firstSub: Subscription = new Subscription();ngOnInit(): void {
this.firstSub = interval(1000).subscribe((count: number) => {
console.log(count);
});
}ngOnDestroy() {
this.firstSub.unsubscribe();
}
Component destroy လုပ်ရင် subscribe လုပ်ထားတာကို unsubscribe လုပ်ပေးဖို့ပြောထားတာပါ။ ဒါဆိုရင်ပြန်စမ်းကြည့်ပါ။ Home tab ကနေတခြား tab ကိုရောက်သွားတဲ့အခါ count ထုတ်ရပ်သွားတာတွေ့ရမှာ ဖြစ်ပါတယ်။
ဒါကြောင့် observable တွေကို အသုံးပြုမယ်ဆိုရင် အမြဲတမ်း unsubscribe လုပ်ပေးဖို့လိုအပ်မှာ ဖြစ်ပါတယ်။
ဒါပေမဲ့ Angular က အသုံးပြုထားတဲ့ observable တွေ ဥပမာ params တို့ httpClient တို့ကတော့ Angular ကအလိုလျှောက် unsubscribe လုပ်ပေးတာဖြစ်လို့ ကိုယ်တိုင်လုပ်ပေးဖို့ မလိုပါဘူး။
Previous: More in Routing
