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:

app/app.component.tsimport { RouterLinkActive } from '@angular/router';

Endi dekoratorda ko‘rsatamiz:

app/app.component.ts@Component({
  ......
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  ......
})

Endi bu atributni bizning havolalarimizga qo‘shamiz:

app/app.component.html<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:

css.active {
  color: red;
}