Как использовать параметры запроса с Angular Router

Введение

Параметры запроса в Angular позволяют передавать необязательные параметры по любому маршруту в приложении. Параметры запроса отличаются от обычных параметров маршрута, которые доступны только на одном маршруте и не являются необязательными (например, /product/:id).

В этой статье вы сошлетесь на пример приложения, отображающего список продуктов. Вы предоставите необязательные значения order и price-range, которые принимающий компонент может прочитать и использовать. Предоставленные значения повлияют на порядок и фильтрацию списка продуктов.

Предпосылки

Чтобы пройти этот урок, вам понадобится:

Некоторое знакомство с RouterLink и ActivatedRoute может оказаться полезным.

Использование параметров запроса с 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 значение сохранить или объединить.

В нашем примере, если мы хотим направить посетителей со страницы с параметром запроса { order: Popular на страницу /users, сохраняя при этом параметры запроса, мы будем использовать сохранить:

goUsers() {
  this.router.navigate(
    ['/users'],
    { queryParamsHandling: 'preserve' }
  );
}

В результате URL-адрес будет выглядеть следующим образом:

http://localhost:4200/users?order=popular

В нашем примере, если мы хотим направить посетителей со страницы с параметром запроса { order: Popular на страницу /users при передаче параметра запроса { фильтр: новый , мы бы использовали 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>

И в нашем примере, если вы хотите сохранить или объединить параметры запроса при последующей навигации, вы должны использовать 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 };
  }
);

Здесь мы использовали оператор распространения объекта, и вот результирующая форма данных в orderObj:

{
  "0": "order",
  "1": "filter",
  "params": {
    "order": "popular",
    "filter": "new"
  }
}

Теперь вы понимаете, как можно использовать queryParams и queryParamMap для доступа к значениям на результирующих маршрутах.

Заключение

В этой статье вы использовали разные примеры для установки и получения параметров запроса в Angular. Вы познакомились с queryParams и queryParamsHandling с помощью Router.navigate и RouterLink. Вы также познакомились с queryParams и queryParamMap с ActivatedRoute.

Если вы хотите узнать больше об Angular, ознакомьтесь с нашей темой по Angular, где вы найдете упражнения и проекты по программированию.