Navegação Programática em Angular

Podemos navegar entre os recursos dentro da aplicação usando links. No entanto, o Angular também oferece suporte à navegação programática. Ou seja, podemos, de forma programada, navegar para qualquer recurso a partir de qualquer lugar da aplicação. Para isso, usamos o serviço Router, que está definido no pacote @angular/router e é injetado nos componentes.

Vamos definir um botão no componente e um método para o botão, que será responsável por redirecionar para um recurso específico:

import { Component } from "@angular/core";
import { RouterOutlet, RouterLink, Router } 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>
    </nav>
    <router-outlet></router-outlet>
    <button (click)="goHome()">Ir para Home</button>
  </div>`,
})
export class AppComponent {
  constructor(private router: Router) {}

  goHome() {
    this.router.navigate([""]); // redireciona para a raiz da aplicação
  }
}

No construtor, recebemos o objeto Router, e no método do botão, chamamos o método navigate(), passando o caminho para onde queremos ir. Quando queremos redirecionar para a página inicial, representada por HomeComponent, passamos uma string vazia. Para redirecionar, por exemplo, ao componente AboutComponent, passamos o caminho correspondente:

this.router.navigate(["/about"]);

Parâmetros de Rotas e Query Strings

Agora, vamos modificar o AppComponent, adicionando um formulário para inserir parâmetros:

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { RouterOutlet, RouterLink, Router } from "@angular/router";

class Item {
  constructor(public id: number, public product: string, public price: number) {}
}

@Component({
  selector: "my-app",
  standalone: true,
  imports: [RouterOutlet, RouterLink, FormsModule],
  styles: `a { padding: 5px; }`,
  template: `<div>
    <div class="form-group">
      <h3>Parâmetros do Item</h3>
      <p>
        <label>ID do Modelo</label><br />
        <input type="number" [(ngModel)]="item.id" />
      </p>
      <p>
        <label>Preço</label><br />
        <input type="number" [(ngModel)]="item.price" />
      </p>
      <p>
        <label>Produto</label><br />
        <input [(ngModel)]="item.product" />
      </p>
      <button (click)="goToItem(item)">Ir</button>
    </div>
    <router-outlet></router-outlet>
  </div>`,
})
export class AppComponent {
  item: Item = new Item(1, "", 0);

  constructor(private router: Router) {}

  goToItem(myItem: Item) {
    this.router.navigate(["/item", myItem.id], {
      queryParams: {
        product: myItem.product,
        price: myItem.price,
      },
    });
  }
}

Para passar os parâmetros necessários para o componente ItemComponent, usamos o método navigate(), onde o primeiro parâmetro é o caminho e os demais são valores para os parâmetros da rota. O segundo parâmetro é um objeto JavaScript que contém os valores para a query string.

O código do componente ItemComponent permanece o mesmo que na explicação anterior:

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) {
    // Observa a mudança no parâmetro 'id'
    route.params.subscribe((params) => (this.id = params["id"]));
    // Observa a mudança nos parâmetros da query string
    route.queryParams.subscribe((queryParam: Observable<Params>) => {
      this.product = queryParam["product"];
      this.price = queryParam["price"];
    });
  }
}

Após inserir os dados e clicar no botão, o componente ItemComponent receberá os valores inseridos.

Parâmetros de Rotas e Query Strings em Angular