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

Когда вы предписываете приложению перейти на маршрут с помощью 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 значение '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

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