Aktív linkek stílusának beállítása Angularban
Megtehetjük, hogy a linkek, amelyek URL-je
megegyezik a címsorban lévővel, valamilyen
stílussal kiemelődjenek, például színnel. Ehhez
az Angular rendelkezik egy speciális
attribútummal RouterLinkActive.
Nézzük meg, hogyan működik. Először importáljuk:
import { RouterLinkActive } from '@angular/router';
Írjuk be a dekorátorba:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
Most adjuk hozzá ezt az attribútumot a linkjeinkhez:
<nav>
<a
routerLink="/aaaa-component"
routerLinkActive="active"
>
Aaaa Component
</a>
<a
routerLink="/bbbb-component"
routerLinkActive="active"
>
Bbbb Component
</a>
</nav>
Amint látod, a példánkban az attribútum értéke
active. Ez egy CSS osztály neve, amelyet az aktív
link kap meg. Most már tetszés szerint
stílusozhatjuk őket:
.active {
color: red;
}
Stílusozd az aktív linkeket a projektben.
