Valori dei parametri delle rotte nel componente in Angular

I valori dei parametri che definiamo nelle rotte possono essere ottenuti nella classe del componente. Vediamo come si può fare. Supponiamo di avere la seguente rotta con parametri:

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

Otteniamo il valore di questo parametro nella classe del componente. Qui è importante notare che i valori dei parametri della rotta possono essere ottenuti solo nel componente associato alla rotta. Nel nostro caso, alla rotta è associato il componente Aaaa. Quindi d'ora in poi lavoreremo con esso.

Quindi, per ottenere i valori dei parametri della rotta è necessario utilizzare il servizio ActivatedRoute. Importiamolo nel nostro componente:

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

Iniettiamo il servizio nel costruttore:

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

Otteniamo l'oggetto con i parametri:

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

Otteniamo il valore del nostro parametro:

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