Как использовать параметры запросов в Angular
Development, Java | Комментировать запись
В Angular есть параметры запросов, которые отправляют дополнительные опции по любому маршруту приложения. Параметры запросов отличаются от параметров обычных маршрутов, которые доступны только в рамках одного маршрута и являются обязательными (например, /product/:id).
В этом руководстве на примере приложения, которое отображает список продуктов, мы рассмотрим работу параметров запросов в Angular. Мы используем дополнительные опции порядка и ценового диапазона (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 для передачи параметров запроса.
Сохранение или объединение параметров запроса
По умолчанию параметры запросов сбрасываются при дальнейшей навигации. Чтобы предотвратить это, вы можете установить значение ‘preserve’ или ‘merge’ для queryParamsHandling.
Вернемся к нашему условному приложению. Предположим, нам нужно перенаправить посетителей на страницу /users со страницы с параметром запроса { order: ‘popular’ }, сохраняя при этом параметры запроса. Тогда мы должны использовать ‘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
В этом разделе вы узнали, как использовать queryParamsHandling для сохранения и объединения параметров запросов.
Параметры запросов и RouterLink
Предположим, для перехода к маршруту в нашем условном приложении мы используем директиву RouterLink. В таком случае мы следующим образом должны использовать queryParams:
<a [routerLink]="['/products']" [queryParams]="{ order: 'popular'}">
Products
</a>
Если же нам нужно сохранить или объединить параметры запросов при последующей навигации, мы будем использовать 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:
{ order: "popular" }
А также params.order:
params.order
Также есть queryParamMap, который возвращает наблюдаемый параметр с объектом paramMap.
Если бы у нас был следующий URL-адрес:
http://localhost:4200/products?order=popular&filter=new
Мы могли бы получить доступ к параметрам запросов следующим образом:
this.route.queryParamMap
.subscribe((params) => {
this.orderObj = { ...params.keys, ...params };
}
);
В этом примере мы использовали spread оператор, а данные в orderObj в результате будут представлены в такой форме:
{
"0": "order",
"1": "filter",
"params": {
"order": "popular",
"filter": "new"
}
}
Теперь вы знаете, как использовать queryParams и queryParamMap, чтобы получить доступ к значениям в полученных маршрутах.
Заключение
В этом руководстве мы рассмотрели разные примеры работы с параметрами запросов Angular. Теперь вы знакомы с queryParams, queryParamsHandling, Router.navigate и RouterLink. Вы также познакомились с queryParams, queryParamMap и ActivatedRoute.
Tags: Angular, AngularJS