Τιμές παραμέτρων διαδρομών στο component στο Angular

Οι τιμές των παραμέτρων που ορίζουμε στα routes, μπορούν να ληφθούν στην κλάση του component. Ας δούμε πώς μπορεί να γίνει αυτό. Ας υποθέσουμε ότι έχουμε την ακόλουθη διαδρομή με παραμέτρους:

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

Ας λάβουμε την τιμή αυτής της παραμέτρου στην κλάση του component. Εδώ πρέπει να σημειωθεί ότι οι τιμές των παραμέτρων της διαδρομής μπορούν να ληφθούν μόνο στο component που είναι συνδεδεμένο στη διαδρομή. Στην περίπτωσή μας, στη διαδρομή είναι συνδεδεμένο το Aaaa component. Επομένως, θα συνεχίσουμε να εργαζόμαστε με αυτό.

Λοιπόν, για να λάβουμε τις τιμές των παραμέτρων της διαδρομής χρειάζεται να χρησιμοποιήσουμε την υπηρεσία ActivatedRoute. Ας την εισάγουμε στο component μας:

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

Ας εισάγουμε την υπηρεσία στον constructor:

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

Ας λάβουμε το αντικείμενο με τις παραμέτρους:

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

Ας λάβουμε την τιμή της παραμέτρου μας:

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