O que é Route Parameters Angular?

Conteúdo

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”:

Ng g c 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().

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
import { PessoaComponent } from './pessoa/employee.component';
 
import { Routes, RouterModule } from '@angular/router';
 
const appRoutes: Routes = [
  { path: 'pessoa', component: PessoaComponent }
];
 
@NgModule({
  declarations: [
    AppComponent,
    PessoaComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

<ul>
  <li><a routerLink="/">Principal</a></li>
  <li><a routerLink="/pessoa">Pessoa</a></li>
</ul>
<hr>
 
<router-outlet></router-outlet>

Como configurar o Route Parameters

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

{ path: 'path_to_component/:placeholder_name',  component: component_name }

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

{ path: '/:placeholder_name',  component: component_name }

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

...
const appRoutes: Routes = [
  { path: 'pessoa', component: PessoaComponent },
  { path: 'pessoa/:id', component: PessoaComponent }
];
...

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:

<a [routerLink]="['/path', 'parameter']">Link</a>

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

<ul>
  <li><a routerLink="/">Principal</a></li>
  <li><a routerLink="/pessoa">Pessoa</a></li>
</ul>
<hr>
 
<a [routerLink]="['/pessoa, '1']">Pessoa 1</a><br><br>
<button [routerLink]="['/pessoa, '2']">Pessoa 2</button>
 
<router-outlet></router-outlet>

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.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
 
@Component({
  selector: 'app-pessoa,
  templateUrl: './pessoa.component.html',
  styleUrls: ['./pessoa.component.css']
})
export class PessoaComponent implements OnInit {
 
  constructor(private activatedRoute : ActivatedRoute) { }
 
  ngOnInit(): void { }
 
}

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().

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
 
@Component({
  selector: 'app-pessoa,
  templateUrl: './pessoa.component.html',
  styleUrls: ['./pessoa.component.css']
})
export class PessoaComponent implements OnInit {
  userID: any;
 
  constructor(private activatedRoute : ActivatedRoute) { }
 
  ngOnInit(): void {
    this.userID = this.activatedRoute.snapshot.paramMap.get("id");
  }
 
}

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”:

<p>User ID: {{ userID }}</p>

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.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
 
@Component({
  selector: 'app-pessa,
  templateUrl: './pessoa.component.html',
  styleUrls: ['./pessoa.component.css']
})
export class PessoaComponent implements OnInit {
  userID: any;
 
  constructor(private activatedRoute : ActivatedRoute) { }
 
  ngOnInit(): void {
    this.activatedRoute.paramMap.subscribe(params => {
      this.userID = params.get('id');
    });
  }
}

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:

/listings?page=4

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:

<a [routerLink]="['path']" [queryParams]="{ key:value }">Página 4</a>

No arquivo “app.comoponent.html”:

<ul>
  <li><a routerLink="/">Principal</a></li>
  <li><a routerLink="/pessoa">Pessoa</a></li>
</ul>
<hr>
 
<a [routerLink]="['/pessoa', '1']" [queryParams]="{ page:1 }">Pessoa 1</a><br><br>
<button [routerLink]="['/pessoa', '2']">Pessoa 2</button>
 
<router-outlet></router-outlet>

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()”:

this.route.navigate(['/path'], { queryParams: { key: value } });

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

import { Component } from '@angular/core';
import { Router } from '@angular/router';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
 
  constructor(private route: Router) { }
 
  navToPage(pageNum: number) {
    this.route.navigate(['/pessoa', '2'], { queryParams: { page: pageNum } });
  }
}

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

<ul>
  <li><a routerLink="/">Principal</a></li>
  <li><a routerLink="/pessoa">Pessoa</a></li>
</ul>
<hr>
 
<a [routerLink]="['/pessoa', '1']" [queryParams]="{ page:1 }">Pessoa 1</a><br><br>
<button (click)="navToPage(4)">Pessoa 2</button>
 
<router-outlet></router-outlet>

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()”.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
 
@Component({
  selector: 'app-pessoa,
  templateUrl: './pessoa.component.html',
  styleUrls: ['./pessoa.component.css']
})
export class PessoaComponent implements OnInit {
  pageNum: any;
 
  constructor(private activatedRoute : ActivatedRoute) { }
 
  ngOnInit(): void {
    this.pageNum = this.activatedRoute.snapshot.queryParamMap.get("page");
  }
 
}

Vamos dar uma olhada na saída:

<p>Página: {{ pageNum }}</p>

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”.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
 
@Component({
  selector: 'app-pessoa,
  templateUrl: './pessoa.component.html',
  styleUrls: ['./pessoa.component.css']
})
export class PessoaComponent implements OnInit {
  pageNum: any;
 
  constructor(private activatedRoute : ActivatedRoute) { }
 
  ngOnInit(): void {
    this.activatedRoute.queryParamMap.subscribe(params => {
      this.pageNum = params.get('page');
    });
  }
 
}

Agora sim temos os valores corretos da página.

O que é Route Parameters Angular?

O que é Route Parameters Angular?

Como configurar o Route Parameters

Como mandar Route Parameter

Como acessar um Route Parameter

Usando o snapshot

Usando Observable para acessar Route Parameter

O que é Query Parameters

Como usar o Query Parameter

Como acessar o Query Parameter

Usando Observable para acessar o Query Parameter

Difícil de aprender?

Enviar Comentário Cancelar resposta

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

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

O que é Route Parameters Angular?

O que é Route Parameters Angular?

Como configurar o Route Parameters

Como mandar Route Parameter

Como acessar um Route Parameter

Usando o snapshot

Usando Observable para acessar Route Parameter

O que é Query Parameters

Como usar o Query Parameter

Como acessar o Query Parameter

Usando Observable para acessar o Query Parameter

Difícil de aprender?

Enviar Comentário Cancelar resposta

Tenha uma carreiraFront-end de Sucesso!

Ebook - JORNADA FRONT-END

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

Tenha uma carreira
Front-end de Sucesso!