Aktyvių nuorodų stilizavimas Angular
Galima padaryti taip, kad nuorodos, kurių URL
sutampa su adreso eilute, būtų paryškintos
kokiu nors stiliumi, pavyzdžiui, spalva. Tam
Angular yra numatytas specialus
atributas RouterLinkActive.
Pažiūrėkime, kaip jis veikia. Pirmiausia jį importuokime:
import { RouterLinkActive } from '@angular/router';
Parašykime dekoratoriuje:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
O dabar pridėkime šį atributą prie mūsų nuorodų:
<nav>
<a
routerLink="/aaaa-component"
routerLinkActive="active"
>
Aaaa Component
</a>
<a
routerLink="/bbbb-component"
routerLinkActive="active"
>
Bbbb Component
</a>
</nav>
Kaip matote, mūsų pavyzdyje atributo reikšmė
yra active. Tai yra CSS klasės pavadinimas,
kurs bus suteikiamas aktyviai nuorodai. Dabar
mes galime jas stilizuoti,
kaip mums patinka:
.active {
color: red;
}
Stilizuokite aktyvias nuorodas savo projekte.
