Hämtning av ruttparametrar i komponenter i Angular

Värden från parametrar som vi definierar i våra rutter kan hämtas i komponentklassen. Låt oss titta på hur detta kan göras. Anta att vi har följande rutt med parametrar:

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

Låt oss hämta värdet på denna parameter i komponentklassen. Här är det viktigt att notera att värden för ruttparametrar endast kan hämtas i den komponent som är kopplad till rutten. I vårt fall är Aaaa-komponenten kopplad till rutten. Därför kommer vi att arbeta med den här komponenten.

Så, för att hämta värden för ruttparametrar behöver vi använda tjänsten ActivatedRoute. Importera den till vår komponent:

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

Låt oss injektera tjänsten i konstruktorn:

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

Låt oss hämta objektet med parametrarna:

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

Låt oss hämta värdet på vår parameter:

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