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 attività basate su eventi con Azure Container Jobs
Elencare le container images installate in un cluster di Kubernetes
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Creare un'applicazione React e configurare Tailwind CSS
Utilizzare gli snapshot con Azure File shares
Gestire liste di tipi semplici con Entity Framework Core
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Eseguire operazioni con timeout in React
Reactive form tipizzati con modellazione del FormBuilder in Angular
Load test di ASP.NET Core con k6
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Utilizzare politiche di resiliency con Azure Container App