Введение
Параметры запросов в Angular позволяют передавать опциональные параметры по любым маршрутам в приложении. Параметры запросов отличаются от обычных параметров маршрутов, которые доступны только на одном маршруте и не являются опциональными (например, /product/:id
).
В этой статье мы рассмотрим пример приложения, которое отображает список продуктов. Мы зададим опциональные значения order
и price-range
, которые принимающий компонент сможет считывать, и на основе которых он сможет действовать. Заданные значения повлияют на порядок и фильтрацию списка продуктов.
Использование параметров запросов с помощью Router.navigate
Когда вы предписываете приложению перейти на маршрут с помощью Router.navigate
, вы передаете параметры запроса с помощью queryParams
.
В нашем примере, если мы хотим направить посетителей к списку продуктов, отсортированному по популярности, это будет выглядеть так:
goProducts() {
this.router.navigate(["https://www.digitalocean.com/products"], { queryParams: { order: 'popular' } });
}
В результате мы получим следующий URL:
http://localhost:4200/products?order=popular
Также вы можете задать несколько параметров запроса. В нашем примере, если мы хотим направить посетителей к списку продуктов, отсортированному по популярности и отфильтрованному по верхнему ценовому диапазону, это будет выглядеть так:
goProducts() {
this.router.navigate(["https://www.digitalocean.com/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]="["https://www.digitalocean.com/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
:
Output
{ order: "popular" }
И значение params.order
:
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, где вы найдете упражнения и проекты по программированию.