Angular-да белсенді сілтемелерді стильдеу

URL мекенжайы сәйкес келетін сілтемелерді ерекше стильмен, мысалы, түспен бөлектеу үшін Angular-да арнайы RouterLinkActive атрибуты бар.

Оның қалай жұмыс істейтінін қарастырайық. Алдымен оны импорттайық:

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;
}