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

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

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

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

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

terminalng generate component chix

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

terminalng generate component chiy

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

app/app.component.tslet childRoutes: Routes = [
  { path: 'chix', component: ChixComponent },
  { path: 'chiy', component: ChiyComponent },
];

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

app/app.component.tsconst appRoutes: Routes = [
  {
    path: 'aaaa',
    component: AaaaComponent,
    children: childRoutes
  },
];

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

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

app/aaaa/aaaa.component.tsimport { RouterOutlet } from '@angular/router';

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

app/aaaa/aaaa.component.ts@Component({
  ......
  imports: [RouterOutlet],
  ......
})

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

app/aaaa/aaaa.component.html<p>အလုပ်လုပ်သည်</p>
<router-outlet></router-outlet>

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