ဟေး (စပင်တဂွန်-ဒိုးနတ်ခေါ်) coder တွေ, သင်ဆဲ 2 angular အပေါ်အလုပ်လုပ်နေကြပါလျှင်, 4 ထို့နောက် angular 5. ရန်သင့် application ကို upgrade ဖို့အချိန်ဖြစ်ပါသည် angular 5 features အသစ်တွေအများကြီးပိုကောင်းတဲ့စွမ်းဆောင်ရည်, အသေးစားရံပုန်ရှိပါတယ်။
သငျသညျ angular မှ 5 အဟောင်း angular 2 application ကို update လုပ်ဖို့လိုလျှင်, သို့ဖြစ်လျှင်ဤသင်ခန်းစာသင်တို့အဘို့ဖြစ်၏။
အနည်းငယ်ကြေကွဲအပြောင်းအလဲများကိုရှိပါတယ်ဘာဖြစ်လို့လဲဆိုတော့ angular မှ 5 4, 2 angular ကနေအဆင့်မြှင့်ခက်လွန်းတာဝန်မဟုတ်ပါဘူး။ အဆိုပါ angular အဖွဲ့ကိုလည်းတတ်နိုင်သမျှရိုးရှင်းသောအဖြစ်, angular မှ 5 ကိုမဆိုဗားရှင်းအနေဖြင့်အဆင့်မြှင့်အောင်တဲ့နေရာလေးကို tool ကိုထားလိုက်ပါတယ်။
ဤတွင်သင့်လျှောက်လွှာအဆင့်မြှင့်ရသောအခါစိတ်တွင်စောင့်ရှောက်ဖို့အနည်းငယ်မှတ်နေသောခေါင်းစဉ်:
၎င်းဒြပ်စင် v4 ကတည်းကပယ်ဖျက်ခဲ့ပြီးအဖြစ် tags များရန်သင့်စီမံကိန်းကိုရဲ့အားလုံး tags များအမည်ပြောင်း။
သင်, ဗားရှင်း 5.0 ရန်သင့် angular packages များအပေါငျးတို့သ upgrade အောက်ပါ command ကို run ဖို့ရှိသည်လိမ့်မယ်:
$ npm 5.0.0 @ angular / {animations တွေကို, ဘုံ, compiler, compiler-CLI, core ကို, ပုံစံများ, http, ပလက်ဖောင်း-browser ကို, ပလက်ဖောင်း-Browser-ပြောင်းလဲနေသော, ပလက်ဖောင်း-ဆာဗာ Router က} @ install
ချည်ခင်ကို အသုံးပြု. # သို့မဟုတ်:
$ ကြိုး 5.0.0 @ angular / {animations တွေကို, ဘုံ, compiler, compiler-CLI, core ကို, ပုံစံများ, http, ပလက်ဖောင်း-browser ကို, ပလက်ဖောင်း-Browser-ပြောင်းလဲနေသော, ပလက်ဖောင်း-ဆာဗာ Router က} @ add
angular 5 ယခုလည်း TypeScript 2.4.2 နှင့် RxJS 5.5.2 ပေါ်မှာမူတည်ပါတယ်, ဒါကြောင့်သင်အဖြစ်ကောင်းစွာသူတို့အားအထုပ် upgrade ရန်ရှိသည်လိမ့်မယ်။
npm install typescript@2.4.2 –save-အတိအကျ
သင်ရက်စွဲ, ငွေကြေး, ဒဿမ, ဒါမှမဟုတ်ရာခိုင်နှုန်းကပိုက်အပေါ်မှီခိုနေလျှင်, 5 မှာသင် format နဲ့မှအသေးစားပြောင်းလဲမှုများကိုမြင်လိမ့်မည်။ en-ကျွန်တော်တို့ကိုထက်အခြားဒေသခံသုံးပြီး application များအတွက်သင် / ဘုံ / i18n_data / locale_fr angular နှင့် registerLocaleData (ဒေသခံ) @ ကနေနှင့်လုပ်နိုင်သော locale_extended_fr တင်သွင်းဖို့လိုအပ်ပါလိမ့်မယ်။ stackoverflow.com/a/47263949/2810015: အပြောင်းအလဲများကိုကိုချိုးဖောက်ပိုက်အပေါ်ပိုမိုသိရှိလိုပါက
သုံးကိရိယာအသုံးပြုခြင်းအစားကိုမဆိုဘဝမှတ်တိုင်သံသရာစက်ဝိုင်းဖြစ်ရပ်များနှင့်အတူသက်တမ်းတိုး: သင် OnInit ကိုတိုးချဲ့, ဒါမှမဟုတ်အသုံးပြုမှုကိုမည်သည့်ဘဝမှတ်တိုင်သံသရာစက်ဝိုင်းဖြစ်ရပ်မှသက်တမ်းတိုးမသုံးပါသေချာစစ်ဆေးပါ။ အဲဒီအစားသုံးကိရိယာကိုသုံးပါ။
HttpModule ထံမှ switch နဲ့ HttpClientModule ဖို့ Http ဝန်ဆောင်မှုနှင့် HttpClient ဝန်ဆောင်မှု။ HttpClient ကို default Ergonomics ရိုးရှင်းစွာ (သင်တော့ဘူး JSON နှင့်မဟုတ်တော့လိုအပ်လျက်ရှိသောမည်သည့်မြေပုံ (res => res.json ()) ဖုန်းခေါ်ဆိုမှု, ဖယ်ရှားပစ်ရန် map ဖို့မလိုအပ်ပါဘူး။ ) ယခုရိုက်နှိပ်ပြန်လာတန်ဖိုးများနှင့် interceptors ထောက်ခံပါတယ်။
ဤတွင်အဟောင်း syntax တစ်ဦးအမြန်ဥပမာင်:
သွင်းကုန် {စိတျအပိုငျး, OnInit} 'angular / အမာခံ @' 'ထံက၎င်း,
'' လေ့လာသူများ rxjs / 'ထံမှ {လေ့လာသူများ} တင်သွင်း;
သွင်းကုန် '' rxjs / observable / ဒ / add ';
သွင်းကုန် '' rxjs / add / အော်ပရေတာ / မြေပုံ ';
သွင်းကုန် '' rxjs / add / အော်ပရေတာ / filter ကို ';
သွင်းကုန် '' rxjs / add / အော်ပရေတာ / ပြုမည် ';
@Component ({ … })
ပို့ကုန်လူတန်းစား AppComponent {OnInit ကိုတိုးချဲ့
myObs = Observable.of ( 'မင်္ဂလာပါ', 'မိကျောင်း', 'ကမ္ဘာ့ဖလား!');
ngOnInit () {
this.myObs
ဖေါက်ပြန်ကြနှင့် (x => console.log ( 'အဆိုပါလုပ်ပေးအော်ပရေတာလုပျဆောငျအော်ပရေတာဖြစ်တယ်!'))
.filter (x => x.length> 8)
.map (x => x.toUpperCase ())
.subscribe (x => console.log (x) အဖွဲ့);
}
}
… နှင့်အသစ်သော lettable အော်ပရေတာ syntax နှင့်တူညီသောဥပမာဖြစ်လာသည်:
'' observable / များ၏ rxjs / 'ထံမှ {၏} တင်သွင်း;
သွင်းကုန် {မြေပုံ filter ကိုထိပုတ်ပါ} 'rxjs / အော်ပရေတာ' 'ထံက၎င်း,
@Component ({ … })
ပို့ကုန်လူတန်းစား AppComponent {OnInit အကောင်အထည်ဖော်ဆောင်ရွက်နေသော
၏ myObs = ( 'မင်္ဂလာပါ', 'မိကျောင်း', 'ကမ္ဘာ့ဖလား!');
ngOnInit () {
this.myObs
.pipe (
(က x => console.log ( 'အဆိုပါလုပ်ပေးအော်ပရေတာသည်ယခုအခါကိုအသာပုတ်နေသည်!')) ကိုအသာပုတ်,
filter ကို (x => x.length> 8),
မြေပုံ (x => x.toUpperCase ())
)
.subscribe (x => console.log (x) အဖွဲ့);
}
}