Angular හි සක්‍රීය සබැඳි විලාසිත කිරීම

වත්මන් යූආර්එල් අඩවි තීරුවේ ලිපිනයට ගැලපෙන සබැඳි යම් විලාසයකින් (උදාහරණයක් ලෙස වර්ණයකින්) ඉස්මතු වන පරිදි සකස් කළ හැකිය. මේ සඳහා Angular හි විශේෂ ගුණාංගයක් RouterLinkActive සපයා ඇත.

එය ක්‍රියා කරන ආකාරය බලමු. පළමුව, එය ආයාත කරමු:

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

වර්ගීකරණයේ දී ලියන්න:

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

දැන් අපි අපේ සබැඳි වෙත මෙම ගුණාංගය එකතු කරමු:

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

ඔබට පෙනෙන පරිදි, අපගේ උදාහරණයේ මෙම ගුණාංගයේ අගය active වේ. මෙය සක්‍රීය සබැඳියට ලබා දෙන CSS පන්තියේ නම වේ. දැන් අපට අවශ්‍ය පරිදි ඒවා විලාසිත කළ හැකිය:

.active {
	color: red;
}

ඔබේ ව්‍යාපෘතියේ සක්‍රීය සබැඳි විලාසිත කරන්න.