Параметры запросов в 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
В нашем примере, если мы используем директиву 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
:
Outputpopular
Также у нас имеется 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.
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!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.