Štýlovanie aktívnych odkazov v Angular
Môžeme spraviť tak, aby odkazy, ktorých URL
sa zhoduje s adresným riadkom, boli zvýraznené
nejakým štýlom, napríklad farbou. Na
to je v Angular pripravený špeciálny
atribút RouterLinkActive.
Pozrime sa, ako funguje. Na začiatok ho importujeme:
import { RouterLinkActive } from '@angular/router';
Zapíšme v dekorátori:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
A teraz pridajme tento atribút k našim odkazom:
<nav>
<a
routerLink="/aaaa-component"
routerLinkActive="active"
>
Aaaa Component
</a>
<a
routerLink="/bbbb-component"
routerLinkActive="active"
>
Bbbb Component
</a>
</nav>
Ako vidíte, v našom príklade je hodnotou
atribútu active. To je názov
CSS triedy, ktorá bude pridelená aktívnemu
odkazu. Teraz ich môžeme štýlovať,
ako chceme:
.active {
color: red;
}
Vyštýlujte aktívne odkazy vo vašom projekte.
