Wartości parametrów tras w komponencie w Angular

Wartości parametrów, które definiujemy w trasach, można uzyskiwać w klasie komponentu. Spójrzmy, jak można to robić. Załóżmy, że mamy następującą trasę z parametrami:

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

Uzyskajmy wartość tego parametru w klasie komponentu. Tutaj należy zwrócić uwagę na to, że wartości parametrów trasy można uzyskiwać tylko w tym komponencie, który jest powiązany z trasą. W naszym przypadku z trasą powiązany jest Aaaa komponent. Dlatego dalej będziemy pracować z nim.

Aby uzyskać wartości parametrów trasy, należy użyć serwisu ActivatedRoute. Zaimportujmy go do naszego komponentu:

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

Wstrzyknijmy serwis w konstruktorze:

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

Uzyskajmy obiekt z parametrami:

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

Uzyskajmy wartość naszego parametru:

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