Uvumilivu wa Viungo Vinavyotumika Katika Angular

Inawezekana kufanya hivi ili viungo ambavyo URL yake inafanana na barua anwani, kuangaziwa kwa mtindo fulani, kwa mfano, rangi. Kwa hili, Angular imeandaa sifa maalum RouterLinkActive.

Tuangalie jinsi inavyofanya kazi. Kwa mwanzo tuingize:

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

Tuweke katika kichoraji:

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

Sasa tuongeze sifa hii kwa viungo vyetu:

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

Kama unavyoona, katika mfano wetu thamani ya sifa ni active. Hili ni jina la tabaka la CSS ambalo litapewa kiungo kinachotumika. Sasa tunaweza kuweka mtindo wake, jinsi tunavyotaka:

css.active {
  color: red;
}