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);
  }
}