// Tutorial //

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

Published on November 16, 2020
Default avatar
By Alligator.io
Developer and author at DigitalOcean.
Русский
Использование параметров запросов в 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 для навигации по маршрут, мы используем 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:

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


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment