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

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

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

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
    selector: 'my-app',
    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 { Router } from '@angular/router';

export class Item {
    id: number;
    product: string;
    price: number;
}

@Component({
    selector: 'my-app',
    template: `
        <div>
            <nav>
                <a routerLink="">Главная</a>
                <a routerLink="/about">О сайте</a>
            </nav>
            <div class="form-group">
                <h3>Параметры объекта</h3>
                <input
                    type="number"
                    [(ngModel)]="item.id"
                    class="form-control"
                    placeholder="Номер модели"
                /><br />
                <input
                    type="number"
                    [(ngModel)]="item.price"
                    class="form-control"
                    placeholder="Цена"
                /><br />
                <input
                    [(ngModel)]="item.product"
                    class="form-control"
                    placeholder="Товар"
                /><br />
                <button
                    (click)="goToItem(item)"
                    class="btn"
                >
                    Перейти
                </button>
            </div>
            <router-outlet></router-outlet>
        </div>
    `,
})
export class AppComponent {
    item: Item = new Item();

    constructor(private router: Router) {}

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

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

Комментарии