Angular တွင် ရှိသော Routing အတွက် လင့်များ

ယခင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့သည် URL ကို လိပ်စာဘားထဲသို့ ကိုယ်တိုင်ရိုက်ထည့်ခဲ့သည်။ ယခုအခါ လင့်ခ်များကို ပြုလုပ်ကြပါစို့။ ထိုလင့်ခ်များကိုနှိပ်ခြင်းဖြင့် component အမျိုးမျိုးကို ပြသနိုင်မည်ဖြစ်သည်။

ဤသို့ပြုလုပ်ရန် ကျွန်ုပ်တို့သည် လင့်ခ်များကို အထူးနည်းလမ်းဖြင့် ပြုလုပ်ရပါမည်။ အကြောင်းမှာ ကျွန်ုပ်တို့သည် တကယ့်လင့်ခ်များကို နှိပ်ပြီး ကူးပြောင်းခြင်းကို မလိုအပ်ပါ။ ကျွန်ုပ်တို့လိုချင်သည်မှာ Angular က အခြား component တစ်ခုကို ပြသခြင်း၊ browser ၏ လိပ်စာဘားထဲရှိ URL ကို ပြောင်းလဲခြင်းနှင့် စာမျက်နှာကို ပြန်လည်မလွှင့်တင်စေဘဲ ထားရန်ဖြစ်သည်။

ထို့ကြောင့် မူလ href attribute အစား ကျွန်ုပ်တို့သည် Angular ၏ attribute ဖြစ်သော RouterLink ကို အသုံးပြုပါမည်။

ဤသို့ပြုလုပ်ရန် ၎င်းကို import လုပ်ရန် လိုအပ်ပါသည်။

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

Decorator ထဲတွင် သတ်မှတ်ရန်။

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

ယခုအခါ ကျွန်ုပ်တို့၏ လင့်ခ်များကို ပြုလုပ်နိုင်ပါပြီ။

app/app.component.html<nav>
  <a routerLink="/aaaa/">
    Aaaa
  </a>
  <a routerLink="/bbbb/">
    Bbbb
  </a>
</nav>