Aktiivsete linkide stiilimine Angularis
Saab teha nii, et lingid, mille URL
sobib aadressiribaga, tõstetakse esile
mõne stiiliga, näiteks värviga. Selleks
on Angularis ette nähtud spetsiaalne
atribuut RouterLinkActive.
Vaatame, kuidas see töötab. Alustuseks impordime selle:
import { RouterLinkActive } from '@angular/router';
Kirjutame dekorraatorisse:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
Ja nüüd lisame selle atribuudi meie linkidele:
<nav>
<a
routerLink="/aaaa-component"
routerLinkActive="active"
>
Aaaa Component
</a>
<a
routerLink="/bbbb-component"
routerLinkActive="active"
>
Bbbb Component
</a>
</nav>
Nagu te näete, on meie näites atribuudi
väärtuseks active. See on CSS klassi
nimi, mis antakse aktiivsele lingile. Nüüd
saame neid stiilida, nagu soovime:
.active {
color: red;
}
Stiilige aktiivseid linke oma projektis.
