Parâmetros de String de Consulta em Angular

Além dos parâmetros de rota, uma solicitação pode conter parâmetros na string de consulta. Por exemplo, na requisição http://localhost:4200/item?product=phone&price=200, a parte product=phone&price=200 representa os parâmetros da consulta: product e price. Esses parâmetros são adicionados no final do endereço após o ponto de interrogação e separados por um "e" comercial: &.

Os parâmetros da string de consulta não afetam a definição das rotas, e sua quantidade é arbitrária. Vamos usar o projeto do tema anterior como base para este exemplo:

helloapp/
├── src/
│   ├── app/
│   │   ├── about.component.ts
│   │   ├── app.component.ts
│   │   ├── app.config.ts
│   │   ├── item.component.ts
│   │   ├── home.component.ts
│   │   ├── not-found.component.ts
│   ├── main.ts
│   ├── index.html
├── angular.json
├── package-lock.json
├── package.json
└── tsconfig.json

Neste projeto, o componente ItemComponent já foi definido para receber um parâmetro de rota. Agora, vamos adicionar a capacidade de obter parâmetros da string de consulta:

import { Component } from "@angular/core";
import { ActivatedRoute, Params } from "@angular/router";
import { Observable } from "rxjs";

@Component({
  selector: "item-info",
  template: `<h2>Modelo {{ id }}</h2>
    <div>Produto: {{ product }}</div>
    <div>Preço: {{ price }}</div>`,
})
export class ItemComponent {
  id: number | undefined;
  product: string | undefined;
  price: number | undefined;

  constructor(private route: ActivatedRoute) {
    // monitorando alterações no parâmetro id
    route.params.subscribe((params) => (this.id = params["id"]));
    // monitorando alterações nos parâmetros da string de consulta
    route.queryParams.subscribe((queryParam: Observable<Params>) => {
      this.product = queryParam["product"];
      this.price = queryParam["price"];
    });
  }
}

Neste exemplo, as propriedades product e price são definidas para armazenar os parâmetros recebidos. A obtenção dos parâmetros da string de consulta é semelhante à obtenção dos parâmetros da rota, mas neste caso, usamos a propriedade queryParams da classe ActivatedRoute, que é do tipo Observable<Params>.

Agora, podemos passar dados para o ItemComponent através da string de consulta, como no exemplo: http://localhost:4200/item/5?product=phone&price=200.

Em seguida, vamos modificar o código do AppComponent, definindo links com parâmetros:

import { Component } from "@angular/core";
import { RouterOutlet, RouterLink } from "@angular/router";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  styles: `a { padding: 5px; }`,
  template: `<div>
    <nav>
      <a routerLink="">Página Inicial</a>
      <a routerLink="/about">Sobre</a>
      <a routerLink="/item/5" [queryParams]="{ product: 'phone', price: 200 }">Item 5</a>
      <a routerLink="/item/8" [queryParams]="{ product: 'tablet' }">Item 8</a>
    </nav>
    <router-outlet></router-outlet>
  </div>`,
})
export class AppComponent {}

Para passar os parâmetros no link, usamos a diretiva queryParams, que aceita um objeto JavaScript.

Parâmetros de String de Consulta em Angular