Angular တွင် လက်ရှိ link များကို စတိုင်ချယ်ရှယ်ခြင်း

လက်ရှိ URL သည် address bar ရှိ URL နှင့် ကိုက်ညီသော link များကို စတိုင်တစ်ခုခု (ဥပမာ - အရောင်) ဖြင့် မျက်နှာပြင်ပေါ်တွင် ထင်ရှားအောင် ပြုလုပ်နိုင်ပါသည်။ ဤအတွက် Angular တွင် အထူးအသုံးပြုနိုင်သော RouterLinkActive attribute ကို ပြင်ဆင်ထားပါသည်။

၎င်း၏အလုပ်လုပ်ပုံကို ကြည့်ရအောင်။ ပထမဦးစွာ ၎င်းကို import လုပ်ရန်:

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

Decorator ထဲတွင် ရေးသွင်းပါ:

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

ယခု ဤ attribute ကို ကျွန်ုပ်တို့၏ link များထံသို့ ထည့်သွင်းကြမည်:

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

သင်မြင်တွေ့ရသည့်အတိုင်း ကျွန်ုပ်တို့၏ ဥပမာတွင် attribute ၏ တန်ဖိုးမှာ active ဖြစ်သည်။ ဤသည်မှာ လက်ရှိ link အား ပေးအပ်မည့် CSS class ၏ အမည်ဖြစ်သည်။ ယခု ကျွန်ုပ်တို့၏ ဆန္ဒအတိုင်း ၎င်းတို့ကို စတိုင်ချယ်ရှယ်နိုင်ပါပြီ:

css.active {
  color: red;
}