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
Utilizzare il nuovo modello GPT-4o con Azure OpenAI
Utilizzare Azure AI Studio per testare i modelli AI
Aprire una finestra di dialogo per selezionare una directory in WPF e .NET 8
Creare una custom property in GitHub
Utilizzare Azure Cosmos DB con i vettori
Generare la software bill of material (SBOM) in GitHub
Creare una libreria CSS universale: Clip-path
Aggiornare a .NET 9 su Azure App Service
Change tracking e composition in Entity Framework
Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
Effettuare il refresh dei dati di una QuickGrid di Blazor
Utilizzare Container Queries nominali