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
Come migrare da una form non tipizzata a una form tipizzata in Angular
Gestire undefined e partial nelle reactive forms di Angular
Inizializzare i container in Azure Container Apps
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Load test di ASP.NET Core con k6
Evitare la script injection nelle GitHub Actions
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Utilizzare le collection expression in C#
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Migrare una service connection a workload identity federation in Azure DevOps
Generare file per il download da Blazor WebAssembly