Penggayaan Pautan Aktif dalam Angular

Anda boleh membuat pautan yang URL-nya sepadan dengan bar alamat untuk ditonjolkan dengan gaya tertentu, contohnya, warna. Untuk tujuan ini, Angular menyediakan atribut khas RouterLinkActive.

Mari kita lihat bagaimana ia berfungsi. Untuk permulaan, importnya:

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

Tetapkan dalam decorator:

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

Sekarang tambahkan atribut ini kepada pautan kami:

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 kami, nilainya atribut adalah active. Ini adalah nama kelas CSS yang akan diberikan kepada pautan aktif. Sekarang kita boleh menggayakannya, seperti yang kita kehendaki:

css.active {
  color: red;
}