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
Generare una User Delegation SAS in .NET per Azure Blob Storage
Selettore CSS :has() e i suoi casi d'uso avanzati
Documentare i servizi REST con Swagger e OpenAPI con .NET 9
Migliorare l'organizzazione delle risorse con Azure Policy
Popolare una classe a partire dal testo, con Semantic Kernel e ASP.NET Core Web API
Scrivere selettori CSS più semplici ed efficienti con :is()
Creare una libreria CSS universale - Rotazione degli elementi
Utilizzare la funzione EF.Parameter per forzare la parametrizzazione di una costante con Entity Framework
Gestire gli accessi con Token su Azure Container Registry
Creare una libreria CSS universale: Clip-path
Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
Applicare un filtro per recuperare alcune issue di GitHub
I più letti di oggi
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- Sfruttare i nuovi overload di TimeSpan.From* per creare timespan usando numeri interi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!