Jornada Frontend

O que é Route Parameters Angular?

Os route parameters nos permite mandar dados através da URL como meio.

Um exemplo é mandar um ID de usuário para outro componente, podemos usar o route parameters e a URL ficaria parecido com isso:

  • …/user/id
  • …/user/1
  • …/user/2

Imagine que nossa aplicação tem muitos usuários, então fica impraticável codar todos os ID em links de route. Para isso podemos usar um placeholder como um ID para os dados.

Vamos começar gerando um componente chamado “pessoa”:

Quer saber mais sobre o Angular? Acompanhe o Blog e o meu Curso de Angular

Agora vamos adicionar a route no novo componente.

  • Importe o Routes e RouterModule do “@angular/router”;
  • Criei o Array do tipo Routes com os caminhos e nomes dos componentes;
  • Não esqueça de usar o RouterModule.forRoot().

Na view do arquivo principal “app.componente.html”, vamos adicionar o seguinte:

Como configurar o Route Parameters

Para definir um parâmetro devemos adicionar o “/” seguido pelo “:” e placeholder, a sintaxe seria a seguinte:

Caso você queira mandar dados para a rota atual, simplesmente removemos o caminho antes do placeholder:

Vamos dizer que queremos enviar os ID de pessoa para o componente “pessoa”:

Se você olhar para URL vamos ver algo do tipo: http://localhost:4200/pessoa/1

Como mandar Route Parameter

Não é prático o usuário digitar o seu ID na URL para mandar um parameters, podemos fazer isso através de links, imagens ou botões.

Vamos usar o routerLink com o array Link Parameter, sintaxe:

Vamos criar um link e um botão e fazer o envio dos dados por lá, “app.componente.html”:

Ao clicar tanto no botão quanto no link, vamos ver na URL o ID do usuário.

Como acessar um Route Parameter

Já estamos mandando os dados pela rota, agora é pegar eles e usar.

Vamos usar o serviço ActivatedRoute, que faz um track na rota ativa no momento e no componente carregado.

Angular adiciona todos os parâmetros no ParamMap, facilitando o nosso trabalho. Existem duas maneiras de pegar um valor do ParamMap.

  • Observable;
  • Snapshot.

Usando o snapshot

O snapshot retorna o valor inicial da rota. Assim podemos acessar o array de paramMap e retirar o valor via get().

No exemplo acima estamos pegando o valor do “id” e guardando dentro do “userID”. Podemos usar o property binding para ver o valor pelo.

No arquivo “Pessoa.component.html”:

Ao clicar no botão ou no link, vai aparecer esse parágrafo com o valor do id.

Usando Observable para acessar Route Parameter

Podemos pegar o valor do parâmetro fazendo um subscribe do paramMap da propriedade ActivatedRoute.

O que é Query Parameters

Query Parameters é um parâmetro opcional que podemos passar através da rota. Ele é passado no final da rota com um ponto de interrogação, sintaxe:

O “page=4” é um parâmetro. Ele é bem popular em paginação e consultas.

Como usar o Query Parameter

O query parameter não é uma parte da rota, podemos enviar usando o “queryParams” ou “router.navigate()”

A sintaxe do queryParams:

No arquivo “app.comoponent.html”:

Ao clicar no link e no botão vamos ver no final da URL o nosso “page=1” e “page=2”.

A sintaxe do “router.navigate()”:

Não podemos esquecer de fazer o import do Router.

No exemplo acima, nós envolvemos o nosso link com um método que facilita especificar o query parameter.

Agora ao clicar no botão, vamos ver na URL o “page=4”.

Como acessar o Query Parameter

Da mesma forma que fizemos com o ActivatedRoute, mas ao invés de usar o “ParamMap” vamos utilizar o “queryParamsMap”.

Usando o snapshot para acessar o Query Parameter

O snapshot retorna o valor inicial da rota, podemos acessar ele usando um “get()”.

Vamos dar uma olhada na saída:

Ao clicar no link da pessoa 1, vamos ver o número “1”, porém se clicar no botão agora, o valor não é atualizado para “4”, isso porque o snapshot pega o valor inicial do componente e assim não atualiza mais qualquer informação.

Porém podemos usar um observable para contornar isso.

Usando Observable para acessar o Query Parameter

Podemos pegar o valor do query parameter dando um subscribing no “queryParamMap”.

Agora sim temos os valores corretos da página.

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

Fruto de mais de 7 anos estudando e trabalhando com Front-end, a "Jornada Front-end - O Guia Definitivo" é um manual completo para todos que querem subir em suas carreiras do zero ou subir do seu nível atual.

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

Share This