Stylisasi Tautan Aktif di Angular

Kita dapat membuat tautan yang URL-nya cocok dengan bilah alamat untuk ditonjolkan dengan gaya tertentu, misalnya warna. Untuk ini, Angular menyediakan atribut khusus RouterLinkActive.

Mari kita lihat cara kerjanya. Pertama, impor modulnya:

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

Deklarasikan dalam dekorator:

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

Sekarang tambahkan atribut ini ke tautan kita:

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

Seperti yang Anda lihat, dalam contoh kita, nilainya atribut adalah active. Ini adalah nama kelas CSS yang akan diberikan kepada tautan aktif. Sekarang kita dapat menata gayanya, sesuai keinginan kita:

css.active {
  color: red;
}