Angular-ში აქტიური ბმულების სტილიზაცია

შესაძლებელია ისე მოვიქცეთ, რომ ის ბმულები, რომელთა URL-იც ემთხვევა მისამართების ზოლს, გამოიყოს რაიმე სტილით, მაგალითად, ფერით. ამისთვის Angular-ში გათვალისწინებულია სპეციალური ატრიბუტი RouterLinkActive.

მოდით ვნახოთ, როგორ მუშაობს ის. დასაწყისისთვის იმპორტირება მისი:

app/app.component.tsimport { RouterLinkActive } from '@angular/router';

ჩავწეროთ დეკორატორში:

app/app.component.ts@Component({
  ......
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  ......
})

ახლა კი დავამატოთ ეს ატრიბუტი ჩვენს ბმულებს:

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

როგორც ხედავთ, ჩვენს მაგალითში ატრიბუტის მნიშვნელობა არის active. ეს არის CSS კლასის სახელი, რომელიც მიენიჭება აქტიურ ბმულს. ახლა ჩვენ შეგვიძლია მათი სტილიზაცია სურვილისამებრ:

css.active {
  color: red;
}