Angular Academy · Lezione

Parametri di route e parametri di query

Leggere e reagire ai parametri delle route

Parametri di route e parametri di query è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Parametri di percorso e parametri di query

I parametri di percorso fanno parte del path (/user/42). I parametri di query vengono aggiunti dopo ? (/search?q=ng&page=2). Il router consente di accedere in modo reattivo a entrambi.

Definire un parametro di percorso

Utilizzi i due punti nel path per dichiarare un parametro.

export const routes = [
  { path: 'user/:id', component: UserComponent }
];

Leggere i parametri con paramMap

ActivatedRoute.paramMap è un observable che emette ogni volta che cambiano i parametri di percorso. Utilizzi .get() per leggere un valore.

import { inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

const route = inject(ActivatedRoute);
route.paramMap.subscribe(params => {
  const id = params.get('id');
  console.log('user id', id);
});

Perché osservare i parametri

La navigazione da /user/1 a /user/2 può riutilizzare il componente. Il costruttore viene eseguito una volta sola, ma paramMap emette di nuovo: si sottoscriva quindi per reagire al cambiamento.

Snapshot per letture singole

Se il componente non viene mai riutilizzato con un parametro diverso, può leggere lo snapshot in modo sincrono.

const id = route.snapshot.paramMap.get('id');
// only valid if the route param will not change
// while this component instance is alive

Parametri di query con queryParamMap

queryParamMap espone i valori della query string, anch'essi come observable.

route.queryParamMap.subscribe(qp => {
  const page = Number(qp.get('page') ?? '1');
  const q = qp.get('q') ?? '';
  console.log(q, page);
});

Navigare con i parametri di query

Utilizzi l'opzione queryParams in router.navigate o nella direttiva routerLink.

import { Router } from '@angular/router';
const router = inject(Router);

router.navigate(['/search'], {
  queryParams: { q: 'angular', page: 2 }
});

Mantenere i parametri di query

queryParamsHandling: 'merge' mantiene i parametri esistenti mentre ne aggiorna alcuni; 'preserve' li conserva durante la navigazione.

router.navigate(['/search'], {
  queryParams: { page: 3 },
  queryParamsHandling: 'merge'
});

Binding degli input del componente (moderno)

Con withComponentInputBinding(), i parametri di percorso e di query possono essere associati direttamente a @Input() del componente, o agli input signal, evitando di usare ActivatedRoute.

// in provideRouter(routes, withComponentInputBinding())

export class UserComponent {
  @Input() id!: string; // bound from /user/:id
}

getAll per i parametri ripetuti

Utilizzi getAll() quando una chiave di query può comparire più volte, ad esempio ?tag=a&tag=b.

route.queryParamMap.subscribe(qp => {
  const tags = qp.getAll('tag'); // ['a', 'b']
  console.log(tags);
});

Combinare i parametri con il caricamento dei dati

Un pattern comune consiste nel trasformare il parametro in una chiamata HTTP con switchMap, così la modifica dell'id avvia un nuovo caricamento.

route.paramMap.pipe(
  switchMap(p => this.http.get('/api/user/' + p.get('id')))
).subscribe(user => console.log(user));

Verifica rapida

Verifichi la Sua comprensione dei parametri di percorso.

Riepilogo: parametri di percorso e di query

Il router espone i parametri in modo reattivo.

paramMap: parametri del path, da osservare in caso di riutilizzo.
queryParamMap: query string, con getAll per i valori ripetuti.
snapshot per letture singole.
withComponentInputBinding() associa i parametri agli input.

Prossimo argomento: resolver e dati di percorso.

Domande Frequenti

La lezione «Parametri di route e parametri di query» è gratuita?

Sì — il testo completo di «Parametri di route e parametri di query» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Parametri di route e parametri di query»?

Leggere e reagire ai parametri delle route Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Parametri di route e parametri di query»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy