Oblikovanje aktivnih povezav v Angular

Lahko naredite tako, da se povezave, katerih URL se ujema z naslovno vrstico, poudarijo z določenim slogom, na primer z barvo. Za to je v Angularju predviden poseben atribut RouterLinkActive.

Poglejmo, kako deluje. Za začetek ga uvozimo:

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

Določimo v dekoratorju:

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

In zdaj dodajmo ta atribut našim povezavam:

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

Kot vidite, je vrednost atributa v našem primeru active. To je ime razreda CSS, ki bo dodeljen aktivni povezavi. Zdaj jih lahko oblikujemo, kot želimo:

css.active {
  color: red;
}