Angular-da faol havolalarni stilizatsiya qilish
URL manzili brauzerning manzilar satriga mos keladigan havolalarni, masalan, rang bilan ajratib ko‘rsatish mumkin. Buning uchun
Angularda maxsus RouterLinkActive atributi mavjud.
Keling, u qanday ishlashini ko‘ramiz. Avval uni import qilamiz:
import { RouterLinkActive } from '@angular/router';
Endi dekoratorda ko‘rsatamiz:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
Endi bu atributni bizning havolalarimizga qo‘shamiz:
<nav>
<a
routerLink="/aaaa-component"
routerLinkActive="active"
>
Aaaa Component
</a>
<a
routerLink="/bbbb-component"
routerLinkActive="active"
>
Bbbb Component
</a>
</nav>
Ko‘rib turganingizdek, misolimizda atribut qiymati active. Bu CSS klass nomi bo‘lib, faol havolaga beriladi. Endi biz ularni xohlagancha stilizatsiya qilishimiz mumkin:
.active {
color: red;
}
Loyihangizdagi faol havolalarni stilizatsiya qiling.
