Введение
При создании приложений могут возникнуть сценарии, когда нам нужно передать некоторые аргументы или параметры для описания поведения маршрута. В Angular, они называются query-параметрами, и они необязательны. Query-параметры не следует путать с обычными route-параметрами, которые являются обязательными и привязаны только к одному маршруту.
Чтобы прояснить разницу между параметрами маршрута (route parameters) и параметрами запроса (query parameters), представьте, что вы создаете приложение для хранения товаров. У вас может быть маршрут, который открывает любой конкретный товар с помощью product_id. Вы также можете указать query-параметр: read_only. Когда read_only имеет значение true, пользователь может только просматривать запись, тогда как если read_only имеет значение false, пользователь также может редактировать запись. Таким образом, используя всего один маршрут, можно обрабатывать сценарии как редактирования, так и просмотра. Здесь product_id — это параметр маршрута, а read_only, который является необязательным, — это query -параметр.
Предварительные требования
Для полного понимания этой статьи необходимо знакомство с созданием приложений на Angular. Также будет полезен опыт работы с Angular Router, RouterLink и ActivatedRoute.
Передача query-параметров с помощью Router.navigate
Если вы используете Router.navigate для перехода по маршрутам, используйте queryParams для отправки query-параметров.
В приведенном выше примере, если мы хотим, чтобы посетители видели список товаров, отсортированных по популярности, мы будем использовать код ниже:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular' } } ); } |
При использовании этого кода URL-адрес примет следующий вид:
|
1 |
http://localhost:4200/products?order=popular |
Однако могут возникнуть сценарии, когда при переходе нам нужно передать несколько параметров. Например, если мы хотим упорядочить товары по популярности, а также по цене, мы можем использовать код ниже:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular', price: 'high-to-low' } } ); } |
На этот раз URL-адрес примет следующий вид:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
На этом мы заканчиваем рассмотрение того, как задавать query-параметры с помощью queryParams.
Предотвращение потери query-параметров с помощью queryParamsHandling
При переходе между маршрутами параметры имеют тенденцию теряться. Предположим, если мы передадим аргумент arg0, он не будет передан при последующей маршрутизации. Мы можем сохранить параметры, используя queryParamsHandling и установив значение в preserve или merge.
В приведенном выше примере предположим, что мы хотим перенаправить посетителей на страницу brands со страницы product с параметром маршрута { order: 'popular' }, сохраняя при этом параметры маршрута. Для этого мы можем использовать queryParamsHandling и установить его в preserve :
|
1 2 3 4 5 6 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParamsHandling: 'preserve' } ); } |
Это приведет к тому, что URL-адрес будет выглядеть следующим образом:
|
1 |
http://localhost:4200/users?brand=popular |
Далее, допустим, мы хотим сохранить query-параметр предыдущего маршрута { order: 'popular' } при добавлении новых параметров { price: 'high-to-low' }. Мы можем установить queryParamsHandling в merge:
|
1 2 3 4 5 6 7 8 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParams: { price: 'high-to-low' }, queryParamsHandling: 'merge' } ); } |
С приведенным выше кодом URL-адрес станет:
|
1 |
http://localhost:4200/brand?order=popular&price=high-to-low |
На этом мы завершаем тему сохранения параметров запроса с использованием queryParamsHandling для сохранения или объединения.
Передача параметров запроса с помощью RouterLink
Принимая во внимание нашу предыдущую ссылку, если мы хотим использовать RouterLink директиву для навигации, нам нужно будет передать параметры запроса с помощью queryParams как показано ниже:
|
1 2 3 |
<a [routerLink]="['/products']" [queryParams]="{ order: 'popular' }"> Товары </a> |
Обратите внимание, как мы передаем объект в queryParams с помощью односторонней привязки. Мы также можем передать весь объект в качестве queryParams .
Кроме того, если мы хотим перенести эти параметры запроса на последующую навигацию, мы можем использовать параметр queryParamsHandling. Возможными значениями queryParamsHandling являются merge и preserve:
|
1 2 |
<a [routerLink]="['/products']" [queryParams]="{ filter: 'new', order: 'popular' }" queryParamsHandling="merge">Товары</a> |
Здесь мы увидели, как передавать queryParams и обрабатывать параметры с помощью queryParamsHandling в RouterLink.
Чтение значений параметров запроса
До сих пор мы учились передавать параметры запроса в маршруте. Эти параметры были необязательными и использовались для передачи некоторой информации на целевую страницу. Отправка параметров — это одна часть, но также необходимо прочитать параметры из URL-адреса и использовать их.
В Angular мы читаем параметры запроса маршрута с помощью класса ActivatedRoute. Класс ActivatedRoute имеет observable-свойство под названием queryParams для получения параметров текущего URL-адреса.
Предположим, мы имеем дело со следующим URL-адресом:
|
1 |
http://localhost:4200/products?order=popular |
Чтобы получить доступ к параметру запроса order в коде, мы используем следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { ActivatedRoute } from '@angular/router'; import 'rxjs/add/operator/filter'; @Component({ ... }) export class SampleComponent 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; }); } } |
Здесь в консоли мы увидим значение параметра запроса order — “popular” выведен на экран. Если у нас есть несколько параметров запроса, мы можем использовать queryParamMap свойство, которое возвращает observable-объект paramsMap объект.
Если у нас есть URL-адрес с несколькими параметрами запроса, например:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
Мы можем получить доступ к этим параметрам запроса, используя следующий код:
|
1 2 3 4 5 |
this.route.queryParamMap .subscribe((params) => { this.queryObj = { ...params.keys, ...params }; } ); |
Используя оператор расширения объекта (spread operator) здесь, мы получаем следующий результат:
|
1 2 3 4 5 6 7 8 |
{ "0": "order", "1": "filter", "params": { "order": "popular", "price": "high-to-low" } } |
Наконец, вы должны понимать, как получить доступ к параметрам запроса из результирующих маршрутов.
Заключение
В этом руководстве мы рассмотрели разницу между параметрами запроса и параметрами маршрута. Мы также изучили, как передавать аргументы между маршрутами в качестве параметров запроса, а также получать их обратно на странице с помощью queryParams и queryParamsHandling с Router.navigate и RouterLink. Мы также узнали, как обрабатывать queryParams и queryParamMap с ActivatedRoute.
Angular в своей основе требует JavaScript. Если вы хотите расширить свои знания о JavaScript, вы можете ознакомиться со следующими статьями:
- Работа с JavaScript: как работают классы
- Работа с JavaScript: как работают прототипы и наследование
- JavaScript: руководство по индексации, разделению и манипулированию строками
Приятного программирования!
Комментарии
Комментариев пока нет. Будьте первым.