Вредности параметара руте у компоненти у Angular

Вредности параметара које дефинишемо у рутама, могу се приступити у класи компоненте. Погледајмо како се то може урадити. Претпоставимо да имамо следећу руту са параметрима:

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

Хајде да приступимо вредности овог параметра у класи компоненте. Овде је важно обратити пажњу на то да се вредности параметара руте могу приступити само у оној компоненти која је повезана са рутом. У нашем случају, рута је повезана са Aaaa компонентом. Стога ћемо даље радити са њом.

Дакле, за приступ вредностима параметара руте потребно је користити сервис ActivatedRoute. Импортујмо га у нашу компоненту:

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

Инјектујмо сервис у конструктор:

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

Приступимо објекту са параметрима:

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

Приступимо вредности нашег параметра:

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