Значэнні параметраў маршрутаў у кампаненце ў 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);
  }
}