Værdier af ruteparametre i komponenten i Angular

Værdier af parametre, som vi definerer i ruterne, kan hentes i komponentklassen. Lad os se på, hvordan det kan gøres. Lad os sige, at vi har følgende rute med parametre:

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

Lad os hente værdien af denne parameter i komponentklassen. Her skal det bemærkes, at værdier af ruteparametre kun kan hentes i det komponent, der er bundet til rutens. I vores tilfælde er Aaaa-komponenten bundet til ruten. Derfor vil vi fortsætte med at arbejde med den.

Så for at hente værdier af ruteparametre skal du bruge servicen ActivatedRoute. Lad os importere den til vores komponent:

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

Lad os injektere servicen i konstruktøren:

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

Lad os hente objektet med parametrene:

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

Lad os hente værdien af vores parameter:

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