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:
import { RouterLinkActive } from '@angular/router';
Določimo v dekoratorju:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
In zdaj dodajmo ta atribut našim povezavam:
<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:
.active {
color: red;
}
Oblikujte aktivne povezave v vašem projektu.
