Nilai Parameter Laluan dalam Komponen di Angular

Nilai parameter yang kita tentukan dalam laluan boleh didapatkan dalam kelas komponen. Mari kita lihat bagaimana ia boleh dilakukan. Katakan kita mempunyai laluan berikut dengan parameter:

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

Mari kita dapatkan nilai parameter ini dalam kelas komponen. Perhatian harus diberikan kepada fakta bahawa nilai parameter laluan hanya boleh didapatkan dalam komponen yang dipautkan kepada laluan. Dalam kes kami, komponen Aaaa dipautkan kepada laluan. Oleh itu, kita akan bekerja dengannya seterusnya.

Jadi, untuk mendapatkan nilai parameter laluan, perkhidmatan ActivatedRoute perlu digunakan. Mari importnya ke dalam komponen kami:

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

Mari suntik perkhidmatan ke dalam pembina:

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

Mari dapatkan objek dengan parameter:

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

Mari dapatkan nilai parameter kami:

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