Стылізацыя актыўных спасылак у 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;
}

Стылізуйце актыўныя спасылкі ў вашым праекце.