Vrednosti parametara ruta u komponenti u Angularu

Vrednosti parametara koje definišemo u rutama, mogu se dobiti u klasi komponente. Hajde da vidimo kako se to može uraditi. Neka imamo sledeću rutu sa parametrima:

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

Hajde da dobijemo vrednost ovog parametra u klasi komponente. Ovde treba obratiti pažnju da se vrednosti parametara rute mogu dobiti samo u onoj komponenti koja je vezana za rutu. U našem slučaju za rutu je vezana Aaaa komponenta. Stoga ćemo dalje raditi s njom.

Dakle, za dobijanje vrednosti parametara rute potrebno je koristiti servis ActivatedRoute. Uvezi ga u našu komponentu:

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

Uvedi servis u konstruktor:

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

Dobij objekat sa parametrima:

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

Dobij vrednost našeg parametra:

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