Программная навигация¶
Мы можем переходить по ресурсам внутри приложения с помощью ссылок. Но также 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, который содержит все нужные значения для параметров строки запроса: