介绍

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

注意：保留查询参数过去是通过preserveQueryParamsset to完成的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价值：

Output
popular

还有queryParamMap，它返回一个带有paramMap对象的可观察对象。

给定以下路由 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 中设置和获取查询参数。您介绍了queryParams和queryParamsHandling同Router.navigate和RouterLink。您也被引入queryParams和queryParamMap使用ActivatedRoute。

如果您想了解有关 Angular 的更多信息，请查看我们的 Angular 主题页面以获取练习和编程项目。