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

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

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

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

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

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

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

<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 ၏ အမည်ဖြစ်သည်။ ယခု ကျွန်ုပ်တို့၏ ဆန္ဒအတိုင်း ၎င်းတို့ကို စတိုင်ချယ်ရှယ်နိုင်ပါပြီ:

.active {
	color: red;
}

သင့်ပရောဂျက်ရှိ လက်ရှိ link များကို စတိုင်ချယ်ရှယ်ပါ။