介绍
在构建应用程序时，可能会遇到需要传入一些参数来描述路由行为的场景。在 Angular 中，这些被称为 查询 参数，并且它们是可选的。查询参数不应与常规的 路由 参数混淆，后者是必填参数，且仅绑定到单个路由。
为了弄清路由参数和查询参数之间的区别，假设您正在构建一个存储产品的应用程序。您可以拥有一个使用以下内容打开任何特定产品的路由： product_id。您还可以指定一个查询参数： read_only。当 read_only 被设置为 true 时，用户只能查看记录，而当 read_only 为 false 时，用户还可以编辑记录。这样，仅使用一个路由，就可以同时处理编辑和查看的使用场景。这里 product_id 是 路由参数，而 read_only（它是可选的）则是 查询 参数.
前提条件
要充分理解本文，需要熟悉使用 Angular 构建应用程序。拥有 Angular Router、RouterLink 和 ActivatedRoute 的使用经验也会有所帮助。
使用 Router.navigate 传递查询参数
如果您正在使用 Router.navigate 在路由之间进行导航，请使用 queryParams 来发送查询参数。
在上面的示例中，如果我们希望访问者看到按受欢迎程度排序的产品列表，我们将使用以下代码：
|
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 |
以上就是如何使用以下内容设置查询参数的全部内容： queryParams.
使用 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 |
接下来，假设我们想保留上一个路由的查询参数 { 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 具有一个名为 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 属性，它返回一个可观察对象 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 }; } ); |
使用 对象展开运算符，我们得到以下结果：
|
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，可以查看以下博客：
祝您编程愉快！
评论
暂无评论。发表第一条评论吧。