Una delle operazioni più comuni quando si naviga verso una pagina di un'applicazione è passare dei parametri alla pagina. Ad esempio, abbiamo una pagina che mostra una griglia di ordini, l'utente seleziona un ordine e viene redirezionato alla pagina di dettaglio alla quale passa come parametro l'id dell'ordine. Quando un parametro è obbligatorio, la route che specifica la navigazione deve includerlo nella propria definizione.
const routes: Routes = [ { path: 'order/detail/:id', component: OrderDetailComponent } ];
La sintassi :id specifica che nella rotta deve essere incluso un parametro che come nome ha id. L'url /order/detail/1
specifica che il component di dettaglio riceverà un parametro di nome id con valore 1.
Esistono diversi modi per navigare verso una pagina specificando un parametro. 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. Il prossimo esempio mostra come utilizzare la direttiva per ottenere l'url specificato in precedenza.
<a [routerLink]="['order', 'detail', id]">{{id}}</a>
Un altro modo per navigare passando un parametro 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', 1]);
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire operazioni sui blob con Azure Storage Actions
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Gestire undefined e partial nelle reactive forms di Angular
Utilizzare ChatGPT con Azure OpenAI
Inizializzare i container in Azure Container Apps
Creare moduli CSS in React
Reactive form tipizzati con modellazione del FormBuilder in Angular
Eseguire le GitHub Actions offline
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Specificare il versioning nel path degli URL in ASP.NET Web API
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
.NET Conference Italia 2023