Hodnoty parametrů tras v komponentě v Angular

Hodnoty parametrů, které definujeme v trasách, lze získat ve třídě komponenty. Podívejme se, jak to lze udělat. Předpokládejme, že máme následující trasu s parametry:

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

Získejme hodnotu tohoto parametru ve třídě komponenty. Zde je třeba dávat pozor na to, že hodnoty parametrů trasy lze získat pouze v té komponentě, která je navázána na trasu. V našem případě je na trasu navázána Aaaa komponenta. Proto budeme dále pracovat s ní.

Pro získání hodnot parametrů trasy je třeba použít službu ActivatedRoute. Importujme ji do naší komponenty:

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

Vložme službu do konstruktoru:

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

Získejme objekt s parametry:

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

Získejme hodnotu našeho parametru:

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