Hente verdier av ruteparametre i en komponent i Angular

Verdiene til parameterne som vi definerer i rutene, kan hentes i komponentklassen. La oss se på hvordan dette kan gjøres. La oss si at vi har følgende rute med parametre:

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

La oss hente verdien til denne parameteren i komponentklassen. Her bør det bemerkes at verdiene til ruteparametre kun kan hentes i det komponentet som er knyttet til ruten. I vårt tilfelle er Aaaa-komponenten knyttet til ruten. Derfor vil vi jobbe videre med den.

Så, for å hente verdiene til ruteparametre må vi bruke tjenesten ActivatedRoute. La oss importere den til komponenten vår:

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

La oss injisere tjenesten i konstruktøren:

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

La oss hente objektet med parameterne:

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

La oss hente verdien til parameteren vår:

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