Стойности на параметрите на маршрутите в компонент в 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);
  }
}