Aktiivsete linkide stiilimine Angularis

Saab teha nii, et lingid, mille URL sobib aadressiribaga, tõstetakse esile mõne stiiliga, näiteks värviga. Selleks on Angularis ette nähtud spetsiaalne atribuut RouterLinkActive.

Vaatame, kuidas see töötab. Alustuseks impordime selle:

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

Kirjutame dekorraatorisse:

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

Ja nüüd lisame selle atribuudi meie linkidele:

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

Nagu te näete, on meie näites atribuudi väärtuseks active. See on CSS klassi nimi, mis antakse aktiivsele lingile. Nüüd saame neid stiilida, nagu soovime:

css.active {
  color: red;
}