Parâmetros de String de Consulta - 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