Valeurs des paramètres de route dans le composant Angular

Les valeurs des paramètres que nous définissons dans les routes peuvent être récupérées dans la classe du composant. Voyons comment procéder. Supposons que nous ayons la route suivante avec des paramètres :

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

Récupérons la valeur de ce paramètre dans la classe du composant. Il est important de noter que les valeurs des paramètres de route ne peuvent être obtenues que dans le composant associé à la route. Dans notre cas, le composant Aaaa est lié à la route. Nous travaillerons donc avec lui par la suite.

Ainsi, pour obtenir les valeurs des paramètres de route, il faut utiliser le service ActivatedRoute. Importons-le dans notre composant :

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

Injectons le service dans le constructeur :

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

Récupérons l'objet contenant les paramètres :

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

Récupérons la valeur de notre paramètre :

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