Angularда фаол ҳаволаларни стиллаш

URL манзили браузернинг манзил сатибига мос келадиган ҳаволалар қандайдир стил, масалан, ранг билан ажралиб туриши учун қилиш мумкин. Бунинг учун Angularда RouterLinkActive maxsus атрибути назарда тутилган.

У қандай ишлашини кўрамиз. Аввало уни импорт қиламиз:

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

Декораторда кўрсатамиз:

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

Энди бу атрибутни бизнинг ҳаволаримизга қўшамиз:

app/app.component.html<nav>
  <a
    routerLink="/aaaa-component"
    routerLinkActive="active"
  >
    Aaaa Component
  </a>
  <a
    routerLink="/bbbb-component"
    routerLinkActive="active"
  >
    Bbbb Component
  </a>
</nav>

Кўриб турганингиздек, бизнинг мисолда атрибут қиймати active. Бу фаол ҳаволага бериладиган CSS синф номи. Энди биз уларни ҳохлагандай стиллашимиз мумкин:

css.active {
  color: red;
}