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

დასტილიზეთ აქტიური ბმულები თქვენს პროექტში.