Использование параметров запросов в Angular

Введение

Параметры запросов в 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:

Output{ order: "popular" } 

И значение params.order:

Outputpopular 

Также у нас имеется 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, где вы найдете упражнения и проекты по программированию.