Aktyvių nuorodų stilizavimas Angular

Galima padaryti taip, kad nuorodos, kurių URL sutampa su adreso eilute, būtų paryškintos kokiu nors stiliumi, pavyzdžiui, spalva. Tam Angular yra numatytas specialus atributas RouterLinkActive.

Pažiūrėkime, kaip jis veikia. Pirmiausia jį importuokime:

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

Parašykime dekoratoriuje:

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

O dabar pridėkime šį atributą prie mūsų nuorodų:

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

Kaip matote, mūsų pavyzdyje atributo reikšmė yra active. Tai yra CSS klasės pavadinimas, kurs bus suteikiamas aktyviai nuorodai. Dabar mes galime jas stilizuoti, kaip mums patinka:

css.active {
  color: red;
}