Parâmetros de Rotas - Angular

As rotas podem definir parâmetros que nos permitem passar dados para um componente a partir de fontes externas. Para ilustrar, vamos utilizar o projeto do tema anterior:

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

Dentro da pasta src/app, vamos adicionar um novo arquivo item.component.ts contendo o seguinte componente:

import { Component } from "@angular/core";
import { ActivatedRoute } from "@angular/router";

@Component({
    selector: "item-info",
    template: `<h2>Modelo {{id}}</h2>`
})
export class ItemComponent { 
    id: number;
    constructor(private activateRoute: ActivatedRoute) {
        this.id = activateRoute.snapshot.params["id"];
    }
}

Para obter os parâmetros de rota, utilizamos o serviço ActivatedRoute, que contém informações sobre a rota, incluindo os parâmetros e outras propriedades, como query strings. Esse serviço é injetado na aplicação através do mecanismo de dependency injection, permitindo que o recebamos diretamente no construtor do componente.

A propriedade snapshot armazena o estado da rota e contém os parâmetros passados. Neste caso, esperamos que o parâmetro seja chamado "id", mas isso pode variar: o nome do parâmetro é flexível.

Agora precisamos definir uma rota que utilize este componente. Vamos modificar o arquivo app.config.ts:

import { ApplicationConfig } from "@angular/core";
import { provideRouter, Routes } from "@angular/router";

import { HomeComponent } from "./home.component";
import { AboutComponent } from "./about.component";
import { NotFoundComponent } from "./not-found.component";
import { ItemComponent } from "./item.component";

const appRoutes: Routes = [
    { path: "", component: HomeComponent },
    { path: "about", component: AboutComponent },
    { path: "item/:id", component: ItemComponent },
    { path: "**", component: NotFoundComponent }
];

export const appConfig: ApplicationConfig = {
    providers: [provideRouter(appRoutes)]
};

Aqui, adicionamos uma nova rota:

O token :id representa o parâmetro da rota. Isso significa que podemos acessar o componente através de uma URL como /item/6, onde o número 6 será passado como o parâmetro id.

Agora, vamos ajustar o componente principal AppComponent:

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="">Home</a>
                      <a routerLink="/about">Sobre</a>
                      <a routerLink="/item/5">Item 5</a>
                  </nav>
                  <router-outlet></router-outlet>
                </div>`
})
export class AppComponent {}

Ao definir um link para um componente que utiliza parâmetros de rota, todos os parâmetros necessários são inseridos diretamente na URL:

Ao iniciar a aplicação, podemos acessar o componente ItemComponent e passar o id=5 através do link.

Problemas com Múltiplos Parâmetros de Rotas

Este método funciona bem para uma única rota, mas se tivermos vários links apontando para o mesmo componente com diferentes ids, como:

<a routerLink="/item/5">Item 5</a>
<a routerLink="/item/8">Item 8</a>

Se navegarmos primeiro para o link do Item 5, o componente ItemComponent receberá id=5. Contudo, ao clicar no segundo link, o componente continuará exibindo o valor id=5.

Para resolver esse problema, precisamos atualizar dinamicamente o valor de id dentro do componente. Vamos alterar o código do ItemComponent:

import { Component } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { Subscription } from "rxjs";

@Component({
    selector: "item-info",
    template: `<h2>Modelo {{id}}</h2>`
})
export class ItemComponent {
    id: number | undefined;
    private subscription: Subscription;

    constructor(private activateRoute: ActivatedRoute) {
        this.subscription = activateRoute.params.subscribe(params => this.id = params["id"]);
    }
}

O método subscribe() permite que o componente reaja às mudanças nos parâmetros de rota, garantindo que ele receba o novo valor ao navegar para diferentes URLs.

Outra abordagem para resolver essa questão é utilizar o método ngOnInit no ItemComponent:

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { switchMap } from "rxjs/operators";

@Component({
    selector: "item-info",
    template: `<h2>Modelo {{id}}</h2>`
})
export class ItemComponent implements OnInit {
    id: number | undefined;

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        this.route.paramMap.pipe(
            switchMap(params => params.getAll("id"))
        ).subscribe(data => this.id = +data);
    }
}

Neste caso, o valor de id é obtido no método ngOnInit, onde acessamos a propriedade paramMap da rota, que representa um Observable<ParamMap> (um mapa de parâmetros de rota e query string). Utilizamos o método pipe() para aplicar operadores RxJS, como o switchMap(), que nos permite extrair o valor do parâmetro id e atualizá-lo dinamicamente.

Dessa forma, o componente consegue gerenciar corretamente diferentes parâmetros de rota ao longo da navegação.