Navegação Programática - 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