Table of Contents
Введение
Параметры запросов в Angular позволяют передавать опциональные параметры по любым маршрутам в приложении. Параметры запросов отличаются от обычных параметров маршрутов, которые доступны только на одном маршруте и не являются опциональными (например, <^>/product/:id<^>).
В этой статье мы рассмотрим пример приложения, которое отображает список продуктов. Мы зададим опциональные значения order и price-range, которые принимающий компонент сможет считывать, и на основе которых он сможет действовать. Заданные значения повлияют на порядок и фильтрацию списка продуктов.
Использование параметров запросов с помощью Router.navigate
Когда вы предписываете приложению перейти на маршрут с помощью Router.navigate, вы передаете параметры запроса с помощью queryParams.
В нашем примере, если мы хотим направить посетителей к списку продуктов, отсортированному по популярности, это будет выглядеть так:
goProducts() {
this.router.navigate(['/products'], { <^>queryParams: { order: 'popular' }<^> });
}
В результате мы получим следующий URL:
http://localhost:4200/products?<^>order=popular<^>
Также вы можете задать несколько параметров запроса. В нашем примере, если мы хотим направить посетителей к списку продуктов, отсортированному по популярности и отфильтрованному по верхнему ценовому диапазону, это будет выглядеть так:
goProducts() {
this.router.navigate(['/products'], { queryParams: { order: 'popular', <^>'price-range': 'not-cheap'<^> } });
}
В результате мы получим следующий URL:
http://localhost:4200/products?<^>order=popular&price-range=not-cheap<^>
Теперь вы понимаете, как использовать queryParams, чтобы задавать параметры запросов.
Сохранение или объединение параметров запросов с помощью queryParamsHandling
По умолчанию параметры запросов теряются при любых последующих действиях по навигации. Чтобы предотвратить это, вы можете задать для queryParamsHandling значение 'preserve' или 'merge'.
В нашем примере, если мы хотим перенаправлять посетителей со страницы с параметром запроса { order: 'popular' } на страницу /users с сохранением параметров запроса, мы будем использовать 'preserve':
goUsers() {
this.router.navigate(['/users'], { queryParamsHandling: <^>'preserve'<^> });
}
В результате мы получим следующий URL:
http://localhost:4200/users?<^>order=popular<^>
В нашем примере, если мы хотим перенаправлять посетителей со страницы с параметром запроса { order: 'popular' } на страницу /users с передачей параметра запроса { filter: 'new' }, мы будем использовать 'merge':
goUsers() {
this.router.navigate(['/users'], { queryParams: { filter: 'new' }, queryParamsHandling: <^>'merge'<^> });
}
В результате мы получим следующий URL:
http://localhost:4200/users?<^>order=popular&filter=new<^>
Примечание. Ранее для сохранения параметров запроса нужно было задать для свойства preserveQueryParams значение true, но в Angular 4+ эта возможность заменена на queryParamsHandling.
Теперь вы понимаете, как можно использовать queryParamsHandling для сохранения и объединения параметров запросов.
Использование параметров запроса с RouterLink
В нашем примере, если мы используем директиву RouterLink для навигации по маршрут, мы используем queryParams следующим образом:
<a [routerLink]="['/products']" [queryParams]="{ order: 'popular'}">
Products
</a>
В нашем примере, если мы хотим использовать 'preserve' или 'merge' для сохранения или объединения параметров запроса, при последующей навигации queryParamsHandling используется следующим образом:
<a [routerLink]="['/users']"
[queryParams]="{ filter: 'new' }"
queryParamsHandling="merge">
Users
</a>
Теперь вы понимаете, как использовать queryParams и queryParamsHandling с RouterLink.
Доступ к значениям параметров запроса
Теперь мы знаем, как передавать опциональные параметры запроса в маршрут. Давайте посмотри, как получить доступ к этим значениям на полученных маршрутах. Класс ActivatedRoute имеет свойство queryParams, которое возвращает наблюдаемые параметры запроса, доступные на текущем URL.
Возьмем следующий URL маршрута:
http://localhost:4200/products?<^>order=popular<^>
Мы можем получить доступ к параметру запроса order :следующим образом:
// ...
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/filter';
@Component({ ... })
export class ProductComponent implements OnInit {
order: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.<^>queryParams<^>
.filter(params => params.order)
.subscribe(params => {
console.log(params); // { order: "popular" }
this.order = params.order;
console.log(this.order); // popular
}
);
}
}
В журнале консоли мы увидим объект params:
[secondary_label Output]
{ order: "popular" }
И значение params.order:
[secondary_label Output]
popular
Также у нас имеется queryParamMap, возвращающая наблюдаемый объект paramMap.
Возьмем следующий URL маршрута:
http://localhost:4200/products?<^>order=popular&filter=new<^>
Мы можем получить доступ к параметрам запроса следующим образом:
this.route.<^>queryParamMap<^>
.subscribe((params) => {
this.orderObj = { ...params.keys, ...params };
}
);
Здесь мы использовали оператор object spread, и вот так выглядит получившаяся форма данных в orderObj:
{
"0": "order",
"1": "filter",
"params": {
"order": "popular",
"filter": "new"
}
}
Теперь вы понимаете, как можно использовать queryParams и queryParamMap для доступа к значениям на полученных в результате маршрутах.
Заключение
В этой статье мы использовали различные примеры для настройки и получения параметров запросов в Angular. Вы познакомились с опциями queryParams и queryParamsHandling при использовании Router.navigate и RouterLink. Также вы познакомились с опциями queryParams и queryParamMap при использовании ActivatedRoute.
Если вы хотите узнать больше об Angular, посмотрите нашу страницу тем по Angular, где вы найдете упражнения и проекты по программированию.
