Stilisering van Aktiewe Skakels in Angular

Dit kan gedoen word sodat skakels waarvan die URL ooreenstem met die adresbalk, uitgelig word met 'n sekere styl, byvoorbeeld kleur. Vir hierdie doel het Angular 'n spesiale kenmerk RouterLinkActive voorsien.

Kom ons kyk hoe dit werk. Om mee te begin, laat ons dit invoer:

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

Laat ons dit in die dekorator spesifiseer:

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

En nou, laat ons hierdie kenmerk by ons skakels voeg:

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

Soos jy kan sien, is die waarde van die kenmerk in ons voorbeeld active. Dit is die naam van die CSS-klas wat aan die aktiewe skakel gegee sal word. Nou kan ons hulle stiliseer soos ons wil:

css.active {
  color: red;
}