如何在Angular路由器中使用查询参数

介绍

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

在我们的示例中，如果我们想在传递查询参数 { filter: 'new' } 的同时将访问者从具有查询参数 { order: 'popular' } 的页面路由到 /users 页面，我们将使用 '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 中可用的查询参数的 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 对象：

Output{ order: "popular" }

params.order 值：

Outputpopular

还有 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 主题页面 以获取练习和编程项目。