Aktīvo saišu stilizēšana Angular
Var izveidot tā, lai saites, kuru URL
sakrīt ar adreses joslu, izceltos
ar kādu stilu, piemēram, krāsu. Šim
nolūkam Angular ir paredzēts īpašs
atribūts RouterLinkActive.
Apskatīsim, kā tas darbojas. Sākumā importēsim to:
import { RouterLinkActive } from '@angular/router';
Pierakstīsim dekoratorā:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
Un tagad pievienosim šo atribūtu mūsu saitēm:
<nav>
<a
routerLink="/aaaa-component"
routerLinkActive="active"
>
Aaaa Component
</a>
<a
routerLink="/bbbb-component"
routerLinkActive="active"
>
Bbbb Component
</a>
</nav>
Kā jūs redzat, mūsu piemērā atribūta
vērtība ir active. Tas ir
CSS klases nosaukums, kas tiks piešķirts aktīvajai
saitei. Tagad mēs varam tās stilizēt
pēc saviem ieskatiem:
.active {
color: red;
}
Stilizējiet aktīvās saites savā projektā.
