Stilisering av aktiva länkar i Angular

Det är möjligt att göra så att länkar vars URL stämmer överens med adressfältet markeras med en viss stil, till exempel en färg. För detta har Angular ett speciellt attribut RouterLinkActive.

Låt oss se hur det fungerar. Till att börja med importerar vi det:

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

Låt oss skriva in det i dekoratören:

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

Och nu lägger vi till detta attribut till våra länkar:

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

Som du ser är värdet på attributet active. Detta är namnet på CSS-klassen som kommer att ges till den aktiva länken. Nu kan vi styla dem, som vi vill:

.active {
	color: red;
}

Styla de aktiva länkarna i ditt projekt.