Stilsetting av aktive lenker i Angular
Det er mulig å gjøre slik at lenker, hvis URL
samsvarer med adressefeltet, fremheves
med en eller annen stil, for eksempel farge. For
dette har Angular et spesielt
attributt RouterLinkActive.
La oss se hvordan det fungerer. Til å begynne med, importerer vi det:
import { RouterLinkActive } from '@angular/router';
La oss skrive det i dekoratøren:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
Og nå legger vi til dette attributtet til våre lenker:
<nav>
<a
routerLink="/aaaa-component"
routerLinkActive="active"
>
Aaaa Component
</a>
<a
routerLink="/bbbb-component"
routerLinkActive="active"
>
Bbbb Component
</a>
</nav>
Som du ser, i vårt eksempel er verdien
av attributtet active. Dette er navnet
på CSS-klassen som vil bli gitt til den aktive
lenken. Nå kan vi style dem,
slik vi ønsker:
.active {
color: red;
}
Style de aktive lenkene i prosjektet ditt.
