Utilizzo dei query parameter con Angular Router

Introduzione

Durante la creazione di applicazioni, potrebbero esserci scenari in cui desideriamo passare alcuni argomenti o parametri per descrivere il comportamento della rotta. In Angular, questi sono chiamati parametri di query, e sono opzionali. I parametri di query non devono essere confusi con i normali parametri di rotta che sono parametri obbligatori e associati a una sola rotta.

Per chiarire la differenza tra parametri di rotta e parametri di query, immagina di creare un'applicazione che memorizza prodotti. Puoi avere una rotta che apre un qualsiasi prodotto specifico utilizzando product_id. Puoi anche specificare un parametro di query: read_only. Quando read_only è impostato su true, l'utente può solo visualizzare il record, mentre quando read_only è false, l'utente può anche modificare il record. In questo modo, utilizzando una sola rotta, è possibile gestire sia i casi d'uso di modifica che di visualizzazione. Qui product_id è il parametro di rotta e read_only che è opzionale è il parametro di query parameter.

Prerequisiti

Per comprendere appieno questo articolo, è necessaria familiarità con la creazione di applicazioni utilizzando Angular. Sarà utile anche avere esperienza con Angular Router, RouterLink e ActivatedRoute.

Passaggio dei parametri di query con Router.navigate

Se stai usando Router.navigate per navigare tra le rotte, usa queryParams per inviare i parametri di query.

Nell'esempio sopra, se vogliamo che i visitatori vedano l'elenco dei prodotti ordinati per popolarità, useremo il codice qui sotto:

Utilizzando questo codice, l'URL diventerà:

Tuttavia, possono esserci scenari in cui abbiamo bisogno di passare più parametri durante la navigazione. Ad esempio, se vogliamo ordinare i prodotti per popolarità e anche per prezzo, possiamo usare il codice qui sotto:

Questa volta l'URL diventerà il seguente:

Questo conclude come impostare i parametri di query utilizzando queryParams.

Prevenire la perdita dei parametri di query utilizzando queryParamsHandling

Durante la navigazione tra le rotte, i parametri tendono ad andare perduti. Supponiamo che se passiamo un argomento arg0 questo non verrà passato quando avviene il routing successivo. Possiamo salvare i parametri utilizzando queryParamsHandling e impostando il valore su preserve o merge.

Nell'esempio sopra, supponiamo di voler indirizzare i visitatori alla pagina dei brands a partire da quella del product con il parametro di rotta { order: 'popular' }, mantenendo i parametri di rotta. Per fare questo, possiamo usare queryParamsHandling e impostarlo su preserve :

Questo farà apparire l'URL come:

Successivamente, supponiamo di voler preservare il parametro di query della rotta precedente { order: 'popular' }  aggiungendo al contempo nuovi parametri { price: 'high-to-low' }. Possiamo impostare queryParamsHandling su merge:

Con il codice sopra, l'URL diventerà:

Qui concludiamo la conservazione dei parametri di query utilizzando queryParamsHandling per preservare o unire.

Passaggio dei parametri di query con RouterLink

Prendendo in considerazione il nostro link precedente, se vogliamo utilizzare RouterLink per navigare, dovremo passare i parametri di query utilizzando queryParams come di seguito:

Nota come passiamo l'oggetto a queryParams utilizzando il binding unidirezionale. Possiamo anche passare un intero oggetto come queryParams .

Inoltre, se vogliamo trasmettere questi parametri di query nelle navigazioni successive, possiamo utilizzare l'opzione queryParamsHandling. Le opzioni possibili di queryParamsHandling sono merge  e preserve:

Qui abbiamo visto come passare i queryParams e gestire i parametri utilizzando queryParamsHandling in RouterLink.

Lettura dei valori dei parametri di query

Fino ad ora abbiamo imparato come passare i parametri di query nella rotta. Questi parametri erano opzionali e venivano utilizzati per comunicare alcune informazioni alla pagina di destinazione. Inviare i parametri è una parte, ma è anche necessario leggere i parametri dall'URL e utilizzarli.

In Angular, leggiamo i parametri di query della rotta utilizzando la classe ActivatedRoute. La classe ActivatedRoute ha una proprietà osservabile chiamata queryParams per rivelare i parametri dell'URL corrente.

Supponiamo di avere a che fare con il seguente URL:

Per accedere al parametro di query order nel codice, utilizziamo il codice seguente:

Qui nella console, vedremo il valore del order del parametro di query “popular” stampato. Se abbiamo più parametri di query, possiamo usare la queryParamMap proprietà che restituisce un observable paramsMap oggetto.

Se abbiamo l'URL con più parametri di query come:

Possiamo accedere a questi parametri di query utilizzando il codice seguente:

Utilizzando l'operatore spread dell'oggetto qui, otteniamo il risultato seguente:

Infine, dovresti essere in grado di capire come accedere ai parametri di query dalle rotte risultanti.

Conclusione

In questo tutorial, abbiamo esaminato la differenza tra i parametri di query e i parametri di rotta. Abbiamo anche visto come passare gli argomenti attraverso le rotte come parametri di query e come recuperarli nella pagina utilizzando queryParams e queryParamsHandling con Router.navigate e RouterLink. Abbiamo anche imparato come gestire queryParams e queryParamMap con ActivatedRoute.

Angular richiede Javascript come base. Se vuoi approfondire la tua conoscenza di Javascript, puoi consultare i seguenti blog:

• Lavorare con JavaScript: come funzionano le classi
• Lavorare con JavaScript: come funzionano i prototipi e l'ereditarietà
• JavaScript: un tutorial su come indicizzare, dividere e manipolare le stringhe

Buona programmazione!