Angular ရှိ ကလေး routes များ

Routing ထဲတွင် အသုံးပြုထားသော component အတွင်း၌လည်း ကလေး components များ ရှိနေနိုင်သည်။ ထိုကလေး components များကိုလည်း routing မှတစ်ဆင့် ပြသရန် ပြုလုပ်နိုင်ပါသည်။

ဥပမာအနေဖြင့် ကျွန်ုပ်တို့တွင် Aaaa component တစ်ခု ရှိသည်ဆိုပါစို့။ ကျွန်ုပ်တို့သည် ၎င်းကို /aaaa/ URL မှတစ်ဆင့် ဆက်သွယ်ပါသည်။ နောက်ထပ် ကလေး components နှစ်ခုကို ပြုလုပ်ကြမည်- Chix နှင့် Chiy။ ၎င်းတို့ကို Aaaa component ၏ အမြင်အာရုံအတွင်း၌ ပြသပါမည်။ Aaaa တွင် ၎င်း၀င်ဒါများထဲမှ တစ်ခုဖြစ်သည့် router-outlet ရှိမည်ဖြစ်ပြီး၊ URL ပေါ်မူတည်၍ ကလေးတစ်ခု သို့မဟုတ် အခြားကလေးတစ်ခုကို ပြသမည်ဖြစ်သည်။

ထို့ကြောင့်၊ ဖော်ပြခဲ့သည့်အတိုင်း အကောင်အထည်ဖော်ကြပါစို့။

ပထမဆုံး ကလေး component ကို ဖန်တီးမည်-

ng generate component chix

ဒုတိယ ကလေး component ကို ဖန်တီးမည်-

ng generate component chiy

သီးခြား ကလေး routes များကို ရေးသားမည်-

let childRoutes: Routes = [
	{ path: 'chix', component: ChixComponent },
	{ path: 'chiy', component: ChiyComponent },
];

၎င်းတို့ကို Aaaa component ၏ route သို့ ကလေးများအဖြစ် ထည့်သွင်းမည်-

const appRoutes: Routes = [
	{
		path: 'aaaa',
		component: AaaaComponent,
		children: childRoutes
	},
];

မိဘ component ၏ route မှ လမ်းကြောင်းသည် ကလေး၏ လမ်းကြောင်း၏ အစဖြစ်လိမ့်မည်။ ဆိုလိုသည်မှာ၊ ကလေး components များသည် အောက်ပါ URLs များမှတစ်ဆင့် ရရှိနိုင်မည်ဖြစ်သည်- /aaaa/chix နှင့် /aaaa/chiy။

ယခု Aaaa component ကို စီစဉ်ညှိကြပါစို့။ Routing အတွက် tag ကို import လုပ်မည်-

import { RouterOutlet } from '@angular/router';

၎င်းကို decorator ထဲတွင် သတ်မှတ်မည်-

@Component({
	......
	imports: [RouterOutlet],
	......
})

Tag ကို အမြင်အာရုံထဲသို့ ထည့်သွင်းမည်-

<p>အလုပ်လုပ်သည်</p>
<router-outlet></router-outlet>

ယခုတွင် ၎င်းတို့၏ URLs များမှတစ်ဆင့် ကလေး components များကို ဆက်သွယ်နိုင်ပြီး ထို components များကို ပြသနိုင်မည်ဖြစ်သည်။ စမ်းကြည့်ပါ။

ဖော်ပြခဲ့သော ကလေး components ၏ အလုပ်လုပ်ပုံကို အကောင်အထည်ဖော်ပါ။

�လေး components များ ပြောင်းလဲမည့် လင့်ခ်များကို ပြုလုပ်ပါ။