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