Tutorial

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

Published on November 16, 2020
authorauthor

Alligator.io and Bradley Kouchi

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


About the authors
Default avatar
Alligator.io

author



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel