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;
}

Жобаңыздағы белсенді сілтемелерді стильдеңіз.