Angular-ում ակտիվ հղումների ոճավորում

Կարելի է անել այնպես, որ այն հղումները, որոնց URL-ը համընկնում է հասցեային տողի հետ, առանձնանան որոշակի ոճով, օրինակ՝ գույնով: Դրա համար 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;
}

Ոճավորեք ակտիվ հղումները ձեր նախագծում: