简介
Angular 中的查询参数允许在应用程序的任何路由之间传递可选参数。查询参数与常规路由参数不同，常规路由参数仅在一个路由上可用，并且是不可选的（例如 /product/:id）。
在本文中，您将参考一个显示产品列表的应用程序示例。您将提供可选的 order 和 price-range 值，接收组件可以读取并对其进行操作。提供的值将影响产品列表的排序和过滤。
先决条件
要完成本教程，您需要：
- 对 Angular 的
Router、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 设置为 '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 传递查询参数
在我们的示例中，如果您使用 RouterLink 指令导航到路由，您将像这样使用 queryParams：
<a [routerLink]="['/products']" [queryParams]="{ order: 'popular'}" > Products </a>
在我们的示例中，如果您希望在后续导航中 'preserve' 或 'merge' 查询参数，您将像这样使用 queryParamsHandling：
<a [routerLink]="['/users']" [queryParams]="{ filter: 'new' }" queryParamsHandling="merge" > Users </a>
现在您了解了如何在 RouterLink 中使用 queryParams 和 queryParamsHandling。
访问查询参数值
现在我们知道如何传递可选的查询参数到一个路由，让我们看看如何在结果路由上访问这些值。ActivatedRoute 类有一个 queryParams 属性，返回当前 URL 中可用的查询参数的 observable。
给定以下路由 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 对象：
{ order: "popular" }
以及 params.order 的值：
popular
还有 queryParamMap，它返回一个带有 paramMap 对象的 observable。
给定以下路由 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 中的查询参数。您了解了在 Router.navigate 和 RouterLink 中使用 queryParams 和 queryParamsHandling，以及在 ActivatedRoute 中使用 queryParams 和 queryParamMap。
如果您想了解更多关于 Angular 的知识，请查看我们的 Angular 专题页面，了解更多练习和编程项目。
