Angular-da aktiv linklarin stilizasiyasi

URL-i ünvan sətri ilə üst-üstə düşən linklərin, məsələn, rəng kimi bir stil ilə vurğulanmasını təmin etmək olar. Bunun üçün Angular-da xüsusi RouterLinkActive atributu nəzərdə tutulub.

Gəlin onun necə işlədiyinə baxaq. Əvvəlcə onu import edək:

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

Dekorator-da yazaq:

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

İndi isə bu atributu linklərimizə əlavə edək:

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

Gördüyünüz kimi, nümunəmizdə atributun qiyməti active-dir. Bu, aktiv linkə veriləcək CSS sinfinin adıdır. İndi biz onları istədiyimiz kimi stilizə edə bilərik:

css.active {
  color: red;
}