Una delle operazioni più comuni quando si naviga verso una pagina di un'applicazione è passare dei parametri alla pagina. Ad esempio, abbiamo una pagina che mostra una griglia di ordini, l'utente seleziona un ordine e viene redirezionato alla pagina di dettaglio alla quale passa come parametro l'id dell'ordine. Quando un parametro è obbligatorio, la route che specifica la navigazione deve includerlo nella propria definizione.

const routes: Routes = [
  { path: 'order/detail/:id', component: OrderDetailComponent }
];

La sintassi :id specifica che nella rotta deve essere incluso un parametro che come nome ha id. L'url /order/detail/1
specifica che il component di dettaglio riceverà un parametro di nome id con valore 1.

Esistono diversi modi per navigare verso una pagina specificando un parametro. Il primo è usando la direttiva routerLink in combinazione con un tag a. routerLink accetta in input un array di valori che corrispondono ai vari frammenti dell'url. Il prossimo esempio mostra come utilizzare la direttiva per ottenere l'url specificato in precedenza.

<a [routerLink]="['order', 'detail', id]">{{id}}</a>

Un altro modo per navigare passando un parametro consiste nell'usare la classe Router e il suo metodo navigate. La classe Router è iniettata nel costruttore dal motore di dependency injection di Angular e il suo metodo navigate accetta in input un array di valori esattamente come visto per routerLink.

this.router.navigate(['order', 'detail', 1]);