Nello script precedente abbiamo visto come passare un parametro obbligatorio quando usiamo il router per navigare verso un component. In questo script vediamo invece come passare un parametro opzionale. Questa funzionalità torna utile quando vogliamo navigare verso una pagina di dettaglio di un elemento. Ad esempio, se passiamo un id significa che vogliamo vedere il dettaglio dell'elemento corrispondente all'id passato; se non passiamo un id, significa che vogliamo creare un nuovo elemento.

A differenza di quelli obbligatori, i parametri opzionali non necessitano di una definizione all'interno della route quindi possiamo definire la route come se questi non esistessero.

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

Per specificare il parametro opzionale in fase di navigazione abbiamo a disposizione diversi modi. 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. L'ultimo elemento dell'array può essere un oggetto che contiene i parametri opzionali. Il prossimo esempio mostra come utilizzare la direttiva.

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

Un altro modo per navigare passando un parametro opzionale 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', {id: 10}]);

In entrambi i casi, l'url generato è: /order/detail;id=10. Come si vede, il modo in cui i parametri opzionali vengono passati nell'url è differente rispetto a quelli obbligatori.