Parâmetros de rota e parâmetros de consulta

Parâmetros de rota versus parâmetros de consulta

Definindo um parâmetro de rota

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

Lendo parâmetros com paramMap

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);
});

Por que observar os parâmetros

Snapshot para leituras únicas

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

Parâmetros de consulta com queryParamMap

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

Navegando com parâmetros de consulta

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

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

Preservando parâmetros de consulta

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

Vinculação de entradas do componente (moderna)

// in provideRouter(routes, withComponentInputBinding())

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

getAll para parâmetros repetidos

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

Combinando parâmetros com o carregamento de dados

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

Verificação rápida

Recapitulação: parâmetros de rota e de consulta