Aktīvo saišu stilizēšana Angular

Var izveidot tā, lai saites, kuru URL sakrīt ar adreses joslu, izceltos ar kādu stilu, piemēram, krāsu. Šim nolūkam Angular ir paredzēts īpašs atribūts RouterLinkActive.

Apskatīsim, kā tas darbojas. Sākumā importēsim to:

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

Pierakstīsim dekoratorā:

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

Un tagad pievienosim šo atribūtu mūsu saitēm:

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

Kā jūs redzat, mūsu piemērā atribūta vērtība ir active. Tas ir CSS klases nosaukums, kas tiks piešķirts aktīvajai saitei. Tagad mēs varam tās stilizēt pēc saviem ieskatiem:

css.active {
  color: red;
}