Nilai Parameter Rute di Komponen dalam Angular

Nilai parameter yang kita definisikan di rute dapat diperoleh di kelas komponen. Mari kita lihat bagaimana cara melakukannya. Misalkan kita memiliki rute berikut dengan parameter:

app/app.routes.tsconst routes: Routes = [
  { path: 'aaaa/:id', component: AaaaComponent },
  { path: 'bbbb', component: BbbbComponent },
];

Mari kita dapatkan nilai parameter ini di kelas komponen. Perlu diperhatikan di sini bahwa nilai parameter rute hanya dapat diperoleh di komponen yang terikat ke rute. Dalam kasus kita, komponen Aaaa terikat ke rute. Oleh karena itu, selanjutnya kita akan bekerja dengannya.

Jadi, untuk mendapatkan nilai parameter rute, kita perlu menggunakan layanan ActivatedRoute. Impor ke dalam komponen kita:

app/aaaa/aaaa.component.tsimport { ActivatedRoute} from "@angular/router";

Suntikkan layanan ke dalam konstruktor:

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    
  }
}

Dapatkan objek dengan parameter:

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    let params = activateRoute.snapshot.params;
    console.log(params);
  }
}

Dapatkan nilai parameter kita:

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    let params = activateRoute.snapshot.params;
    let id = params['id'];
    console.log(id);
  }
}