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.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Inizializzare i container in Azure Container Apps
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Eseguire operazioni con timeout in React
Miglioramenti nell'accessibilità con Angular CDK
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Usare lo spread operator con i collection initializer in C#
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Utilizzare le collection expression in C#
Limitare le richieste lato server con l'interactive routing di Blazor 8
Gestire undefined e partial nelle reactive forms di Angular
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser