Usando Parâmetros de Consulta com o Angular Router

Introdução

Ao construir aplicações, podem surgir cenários em que queremos passar alguns argumentos ou parâmetros para descrever o comportamento da rota. No Angular, estes são chamados de parâmetros de query, e eles são opcionais. Parâmetros de query não devem ser confundidos com parâmetros de rota regulares que são parâmetros obrigatórios e vinculados a apenas uma rota.

Para esclarecer a diferença entre parâmetros de rota e parâmetros de query, imagine que você está construindo uma aplicação que armazena produtos. Você pode ter uma rota que abre qualquer produto específico usando product_id. Você também pode especificar um parâmetro de query: read_only. Quando o read_only está definido como true, o usuário pode apenas visualizar o registro, ao passo que quando o read_only é false, o usuário também pode editar o registro. Dessa forma, usando apenas uma rota, ambos os casos de uso de edição e visualização podem ser tratados. Aqui product_id é o parâmetro de rota e o read_only que é opcional é o query parâmetro.

Pré-requisitos

Para compreender totalmente este artigo, é necessário ter familiaridade com a construção de aplicações usando o Angular. Ter experiência com Angular Router, RouterLink e ActivatedRoute também será útil.

Passando Parâmetros de Query com Router.navigate

Se você estiver usando Router.navigate para navegar pelas rotas, use queryParams para enviar os parâmetros de query.

No exemplo acima, se quisermos que os visitantes vejam a lista de produtos ordenados por popularidade, usaremos o código abaixo:

Usando este código, o URL se tornará:

No entanto, podem existir cenários em que precisamos passar múltiplos parâmetros ao navegar. Por exemplo, se quisermos ordenar os produtos por popularidade e também por preço, podemos usar o código abaixo:

Desta vez, a URL se tornará a seguinte:

Isso conclui como definir parâmetros de query usando queryParams.

Prevenindo a Perda de Parâmetros de Query Usando queryParamsHandling

Ao navegar entre rotas, os parâmetros tendem a se perder. Suponha que se passarmos um argumento arg0 ele não será passado quando o roteamento subsequente ocorrer. Podemos salvar os parâmetros usando o queryParamsHandling e definindo o valor para preserve ou merge.

No exemplo acima, suponha que queiramos rotear os visitantes para a página de marcas a partir do produto com o parâmetro de rota { order: 'popular' }, mantendo os parâmetros de rota. Para fazer isso, podemos usar o queryParamsHandling e defini-lo como preserve :

Isso fará com que a URL fique assim:

Em seguida, digamos que queremos preservar o parâmetro de query da rota anterior { order: 'popular' }  enquanto adicionamos novos parâmetros { price: 'high-to-low' }. Podemos definir o queryParamsHandling para merge:

Com o código acima, a URL se tornará:

Aqui concluímos a preservação dos parâmetros de consulta usando queryParamsHandling para preservar ou mesclar.

Passando parâmetros de consulta com RouterLink

Levando em consideração o nosso link anterior, se quisermos usar a diretiva RouterLink para navegar, precisaremos passar os parâmetros de consulta usando queryParams como abaixo:

Observe como passamos o objeto para o queryParams usando a vinculação unidirecional. Também podemos passar um objeto inteiro como o queryParams .

Além disso, se quisermos levar esses parâmetros de consulta adiante em navegações subsequentes, podemos usar a opção queryParamsHandling. As opções possíveis de queryParamsHandling são merge  e preserve:

Aqui, vimos como passar os queryParams e o tratamento dos parâmetros usando queryParamsHandling no RouterLink.

Lendo valores de parâmetros de consulta

Até agora, aprendemos como passar os parâmetros de consulta na rota. Esses parâmetros eram opcionais e foram usados para comunicar algumas informações para a página de destino. Enviar os parâmetros é uma parte, mas também é necessário ler os parâmetros da URL e usá-los.

No Angular, lemos os parâmetros de consulta da rota usando a classe ActivatedRoute . A ActivatedRoute possui uma propriedade observável chamada queryParams para revelar os parâmetros da URL atual.

Suponha que estamos lidando com a seguinte URL:

Para acessar o parâmetro de consulta order no código, usamos o código abaixo:

Aqui no console, veremos o valor do parâmetro de consulta order query parameter value “popular” impresso. Se tivermos múltiplos parâmetros de consulta, podemos usar a queryParamMap propriedade que retorna um observable paramsMap objeto.

Se tivermos a URL com múltiplos parâmetros de consulta como:

Podemos acessar esses parâmetros de consulta usando o código abaixo:

Usando o operador spread de objeto aqui, obtemos o resultado abaixo:

Finalmente, você deve ser capaz de entender como acessar parâmetros de consulta a partir das rotas resultantes.

Conclusão

Neste tutorial, vimos a diferença entre parâmetros de consulta e parâmetros de rota. Também vimos como passar os argumentos pelas rotas como parâmetros de consulta e também recuperá-los de volta na página usando queryParams e queryParamsHandling com Router.navigate e RouterLink. Também aprendemos como lidar com queryParams e queryParamMap com ActivatedRoute.

O Angular requer JavaScript em sua base. Se você quiser aprofundar seus conhecimentos sobre JavaScript, pode conferir os seguintes blogs:

• Trabalhando com JavaScript: Como as Classes Funcionam
• Trabalhando com JavaScript: Como Funcionam Protótipos e Heranças
• JavaScript: Um Tutorial sobre Como Indexar, Dividir e Manipular Strings

Feliz Computação!