Программная навигация

Мы можем переходить по ресурсам внутри приложения с помощью ссылок. Но также Angular поддерживает программную навигацию. То есть программным образом из любого места приложения мы можем перейти к любому ресурсу. Для этого применяется сервис Router, который определен в пакете "angular/router" и который передается в компоненты через механизм dependency injection.

Так, определим в компоненте кнопку и обработчик кнопки, который будет перенаправлять на определенный ресурс:

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

@Component({
    selector: "my-app",
    imports: [RouterOutlet, RouterLink],
    styles: `a {padding: 5px;}`,
    template: `<div>
                    <nav>
                        <a routerLink="">Главная</a>
                        <a routerLink="/about">О сайте</a>
                    </nav>
                    <router-outlet></router-outlet>
                    <button (click)="goHome()">На главную</button>
               </div>`
})
export class AppComponent {
     
    constructor(private router: Router){}
    goHome(){
        this.router.navigate([""]); // переход на корень приложения
    }
}

Через конструктор получаем объект Router и в обработчике кнопки вызываем его метод navigate(). В этот метод передается путь перехода. Если мы переходим на главную страницу, которая представлена HomeComponent, то передается пустая строка. Чтобы перейти, допустим, к компоненту AboutComponent, можно было бы передать соответствующий путь:

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

Параметры маршрута и строки запроса

Изменим компонент AppComponent, добавив форму для ввода параметров:

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",
    imports: [RouterOutlet, RouterLink, FormsModule],
    styles: `a {padding: 5px;}`,
    template: `<div>
                    <div  class="form-group">
                        <h3>Параметры объекта</h3>
                        <p>
                            <label>Номер модели</label><br>
                            <input type="number" [(ngModel)]="item.id" />
                        <p>
                        <p>
                            <label>Цена</label><br>
                            <input type="number" [(ngModel)]="item.price" />
                        <p>
                        <p>
                            <label>Товар</label><br>
                            <input [(ngModel)]="item.product" />
                        <p>
                        <button (click)="goToItem(item)">Перейти</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
                }
            }
        );
    }
}

Для передачи компоненту ItemComponent нужных параметров в метод navigate() первого параметра передается набор значений, первое из которых - собственно путь, а все последующие - значения для параметров маршрута. Второй параметр представляет объект javascript, который содержит все нужные значения для параметров строки запроса.

Код компонента ItemComponent оставим тем же, что и в прошлой теме:

import { Component} from "@angular/core";
import { ActivatedRoute, Params } from "@angular/router";
import { Observable } from "rxjs";
  
@Component({
    selector: "item-info",
    template: `<h2>Модель {{id}}</h2>
                <div>Товар: {{product}}</div>
                <div>Цена: {{price}}</div>`
})
export class ItemComponent{ 
     
    id:number|undefined;
    product:string|undefined;
    price:number|undefined;

    constructor(private route: ActivatedRoute){
         
        // отслеживаем изменение параметра id
        route.params.subscribe(params=>this.id=params["id"]);
        // отслеживаем изменение параметров строки запроса
        route.queryParams.subscribe(
            (queryParam: Observable<Params>) => {
                this.product = queryParam["product"];
                this.price = queryParam["price"];
            }
        );
    }
}

В итоге после ввода данных и нажатия на кнопку компонент ItemComponent будет получать введенные данные: