简介
以角度查询参数允许在应用程序中的任何路径上传递可选参数。查询参数不同于常规的路由参数，常规的路由参数只能在一条路径上使用，不是可选的(如/product/：id)。
在本文中，您将参考一个显示产品列表的应用程序示例。您将提供可选的order和price-range值，接收组件可以读取这些值并对其进行操作。提供的值将影响产品列表的排序和筛选。
前提条件
要完成本教程，您需要：
- 熟悉角度
Router和RouterLink以及激活的路由可能会有所帮助。
通过Router.Navigate使用查询参数
如果您使用Router.Navigate必选导航到路径，则需要传入带有queryParams的查询参数。
在我们的例子中，如果我们想将访问者路由到按受欢迎程度排序的列表中的产品，它看起来像这样：
1goProducts() {
2 this.router.navigate(
3 ['/products'],
4 { queryParams: { order: 'popular' } }
5 );
6}
这将产生一个类似以下内容的URL：
1http://localhost:4200/products?order=popular
您还可以提供多个查询参数。在我们的示例中，如果我们想要将访问者路由到按受欢迎程度排序并用昂贵的价格范围过滤的产品列表，它将如下所示：
1goProducts() {
2 this.router.navigate(
3 ['/products'],
4 { queryParams: { order: 'popular', 'price-range': 'not-cheap' } }
5 );
6}
这将产生一个类似以下内容的URL：
1http://localhost:4200/products?order=popular&price-range=not-cheap
现在，您已经了解了如何使用queryParams来设置查询参数。
使用queryParamsHandling保留或合并查询参数
默认情况下，查询参数在任何后续导航操作中都会丢失。为了避免这种情况，您可以将queryParamsHandling设置为‘保留’或‘合并’。
在我们的示例中，如果我们想要在保留查询参数的同时将访问者从带有查询参数{order：‘Popular’}的页面路由到/users页面，我们可以使用‘preserve’：
1goUsers() {
2 this.router.navigate(
3 ['/users'],
4 { queryParamsHandling: 'preserve' }
5 );
6}
这将产生一个类似以下内容的URL：
1http://localhost:4200/users?order=popular
在我们的示例中，如果我们想要在传递查询参数{Filter：‘new’}的同时将访问者从带有查询参数{order：‘Popular’}的页面路由到/users页面，我们可以使用‘merge’：
1goUsers() {
2 this.router.navigate(
3 ['/users'],
4 {
5 queryParams: { filter: 'new' },
6 queryParamsHandling: 'merge' }
7 );
8}
这将产生一个类似以下内容的URL：
1http://localhost:4200/users?order=popular&filter=new
<$>[备注]
注意： 过去保存查询参数需要preserveQueryParams设置为true，但在角度4+中不再支持，取而代之的是queryParamsHandling。
<$>
现在，您已经了解了如何使用queryParamsHandling来保留和合并查询参数。
使用RouterLink查询参数
在我们的示例中，如果您使用RouterLink指令导航到该路由，您将使用queryPars，如下所示：
1<a
2 [routerLink]="['/products']"
3 [queryParams]="{ order: 'popular'}"
4>
5 Products
6</a>
在我们的示例中，如果您想要在后续导航中保留‘或’合并‘查询参数，您将使用queryParamsHandling，如下所示：
1<a
2 [routerLink]="['/users']"
3 [queryParams]="{ filter: 'new' }"
4 queryParamsHandling="merge"
5>
6 Users
7</a>
现在您了解了如何将queryParams和queryParamsHandling与RouterLink一起使用。
访问查询参数值
现在我们已经了解了如何将可选的查询参数传递给路由，接下来让我们看看如何在生成的路由上访问这些值。ActivatedRoute类有一个queryParams属性，该属性返回当前URL中可用查询参数的可观察值。
给定以下路由URL：
1http://localhost:4200/products?order=popular
我们可以像这样访问order查询参数：
1// ...
2import { ActivatedRoute } from '@angular/router';
3import 'rxjs/add/operator/filter';
4
5@Component({ ... })
6export class ProductComponent implements OnInit {
7 order: string;
8 constructor(private route: ActivatedRoute) { }
9
10 ngOnInit() {
11 this.route.queryParams
12 .filter(params => params.order)
13 .subscribe(params => {
14 console.log(params); // { order: "popular" }
15
16 this.order = params.order;
17
18 console.log(this.order); // popular
19 }
20 );
21 }
22}
在控制台日志中，我们会看到params对象：
1[secondary_label Output]
2{ order: "popular" }
和params.order值：
1[secondary_label Output]
2popular
还有queryParamMap，它返回一个带有paramMap对象的observable。
给定以下路由URL：
1http://localhost:4200/products?order=popular&filter=new
我们可以像这样访问查询参数：
1this.route.queryParamMap
2 .subscribe((params) => {
3 this.orderObj = { ...params.keys, ...params };
4 }
5);
我们在这里使用了Object Send operator，这是orderObj中数据的结果形状：
1{
2 "0": "order",
3 "1": "filter",
4 "params": {
5 "order": "popular",
6 "filter": "new"
7 }
8}
至此，您已经了解了如何使用queryParams和queryParamMap来访问结果路由上的值。
结论
在本文中，您使用了不同的示例来设置和获取Angular中的查询参数。我们已经通过Router.navigate和RouterLink向您介绍了queryParams和queryParamsHandling。我们还介绍了使用ActivatedRoute的queryParams和queryParamMap。
如果您想了解更多有关ANGLE的信息，请查看我们的ANGLE主题页面以获取练习和编程项目。