Maršruto parametrų reikšmės komponente Angular

Parametrų reikšmes, kurias mes apibrėžiame maršrutuose, galima gauti komponento klasėje. Pažiūrėkime, kaip tai galima padaryti. Tarkime, kad turime šį maršrutą su parametrais:

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

Gaukime šio parametro reikšmę komponento klasėje. Čia reikia atkreipti dėmesį į tai, kad maršruto parametrų reikšmes galima gauti tik tame komponente, kuris yra susietas su maršrutu. Mūsų atveju su maršrutu yra susietas Aaaa komponentas. Todėl toliau dirbsime su juo.

Taigi, norint gauti maršruto parametrų reikšmes reikia naudoti servisą ActivatedRoute. Importuokime jį į mūsų komponentą:

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

Įdiegkime servisą konstruktoriuje:

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

Gaukime objektą su parametrais:

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

Gaukime mūsų parametro reikšmę:

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