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
Utilizzare le template variable di Angular per mostrare un messaggio di errore
Introduzione alle novità di Angular 5
Auto scale delle Azure Web App con Application Insights
Gestire retrieve, update e delete in ASP.NET Core con MongoDb
Utilizzare il controller di Xbox nella Universal Windows Platform
Inserire dati in una tabella mappata con il Table-Splitting in Entity Framework Core 2.0
Databinding one-way in Angular
Applicare una classe CSS alla voce di menu attiva in un'applicazione Angular
Leggere i parametri in un component Angular
Le novità del Fall Creators Update per la Universal Windows Platform
Tornano i nostri eventi dal vivo: .NET Conference Italia il 27 ottobre nella Microsoft House
Utilizzare le template variable di Angular per mostrare messaggi di errore in linea
I più letti di oggi
- Crittografare dati sensibili in ASP.NET Core per supportare GDPR
- Testare la compatibilità a Windows 10S con la Universal Windows Platform
- Autenticazione con JWT Token e ASP.NET Core Web API
- Classificare le informazioni sensibili per il GDPR con Azure SQL Database
- Utilizzare una checkbox per mostrare o meno un tag HTML con Angular