angular 参数映射_如何在Angular中使用查询参数

爱被打了一巴掌 2022-11-28 15:20 262阅读 0赞

angular 参数映射

### 介绍 **(**Introduction**)** ###

Query parameters in Angular allow for passing optional parameters across any route in the application. Query parameters are different from regular route parameters, which are only available on one route and are not optional (e.g., `/product/:id`).

Angular中的查询参数允许跨应用程序中的任何路由传递可选参数。 查询参数与常规路由参数不同，后者仅在一条路由上可用，并且不是可选的(例如`/product/:id` )。

In this article, we will reference an example of an application that displays a list of products. We will provide optional `order` and `price-range` values that the receiving component can read and act on. The values provided will affect the ordering and filtering of the list of products.

在本文中，我们将引用一个显示产品列表的应用程序示例。 我们将提供可选的`order`和`price-range`值，接收组件可以读取并对其执行操作。 提供的值将影响产品列表的排序和过滤。

## 在`Router.navigate`使用查询参数 **(**Using Query Parameters with `Router.navigate`**)** ##

If you are navigating to the route imperatively using [`Router.navigate`][Router.navigate], you will pass in query parameters with `queryParams`.

如果您导航到使用势在必行路线[`Router.navigate`][Router.navigate] ，你将通过与查询参数`queryParams` 。

In our example, if we want to route visitors to the products with the list ordered by popularity, it would look like this:

在我们的示例中，如果我们想将访问者引导至具有按受欢迎程度排序的列表的产品，则外观如下所示：

goProducts() {
      this.router.navigate(['/products'], { queryParams: { order: 'popular' } });
    }

This will result in a URL that looks like this:

这将导致URL如下所示：

http://localhost:4200/products?order=popular

You can also provide multiple query parameters. In our example, if we want to route visitors to the products with the list ordered by popularity and filtered with an expensive price range, it would look like this:

您还可以提供多个查询参数。 在我们的示例中，如果我们想将访问者引导至具有按受欢迎程度排序的列表并以昂贵的价格范围进行过滤的产品，则外观如下所示：

goProducts() {
      this.router.navigate(['/products'], { queryParams: { order: 'popular', 'price-range': 'not-cheap' } });
    }

This will result in a URL that looks like this:

这将导致如下所示的URL：

http://localhost:4200/products?order=popular&price-range=not-cheap

Now, you have an understanding of how `queryParams` can be used to set query parameters.

现在，您已经了解如何使用`queryParams`设置查询参数。

## 使用`queryParamsHandling`保留或合并查询参数 **(**Preserving or Merging Query Parameters with `queryParamsHandling`**)** ##

By default, the query parameters are lost on any subsequent navigation action. To prevent this, you can set `queryParamsHandling` to either `'preserve'` or `'merge'`.

默认情况下，查询参数在任何后续导航操作中都会丢失。 为了防止这种情况，您可以将`queryParamsHandling`设置为`'preserve'`或`'merge'` 。

In our example, if we want to route visitors from a page with the query parameter `{ order: 'popular' }` to the `/users` page while keeping the query parameters, we would use `'preserve'`:

在我们的示例中，如果我们希望将访问者从具有查询参数`{ order: 'popular' }`的页面路由到`/users`页面，同时保留查询参数，则可以使用`'preserve'` ：

goUsers() {
      this.router.navigate(['/users'], { queryParamsHandling: 'preserve' });
    }

This will result in a URL that looks like this:

这将导致如下所示的URL：

http://localhost:4200/users?order=popular

In our example, if we want to route visitors from a page with the query parameter `{ order: 'popular' }` to the `/users` page while passing the query parameter `{ filter: 'new' }`, we would use `'merge'`:

在我们的示例中，如果要将访问者从具有查询参数`{ order: 'popular' }`的页面路由到`/users`页面，同时传递查询参数`{ filter: 'new' }` ，则可以使用`'merge'` ：

goUsers() {
      this.router.navigate(['/users'], { queryParams: { filter: 'new' }, queryParamsHandling: 'merge' });
    }

This will result in a URL that looks like this:

这将导致URL如下所示：

http://localhost:4200/users?order=popular&filter=new

**Note:** Preserving query parameters used to be done with `preserveQueryParams` set to `true`, but this is now deprecated in Angular 4+ in favor of `queryParamsHandling`.

**注：**保留用于查询参数与做`preserveQueryParams`设置为`true` ，但现在已经过时，在角4+赞成`queryParamsHandling` 。

Now, you have an understanding of how `queryParamsHandling` can be used to preserve and merge query parameters.

现在，您已经了解如何使用`queryParamsHandling`保留和合并查询参数。

## 在`RouterLink`使用查询参数 **(**Using Query Parameters with `RouterLink`**)** ##

In our example, if instead you are using the `RouterLink` directive to navigate to the route, you would use `queryParams` like this:

在我们的示例中，如果改为使用`RouterLink`指令导航到路由，则可以使用`queryParams` ：

<a [routerLink]="['/products']" [queryParams]="{ order: 'popular'}">
      Products
    </a>

And in our example, if you want to `'preserve'` or `'merge'` query parameters on subsequent navigation you would use `queryParamsHandling` like this:

在我们的示例中，如果要在后续导航中`'preserve'`或`'merge'`查询参数，可以使用`queryParamsHandling`如下所示：

<a [routerLink]="['/users']"
       [queryParams]="{ filter: 'new' }"
       queryParamsHandling="merge">
      Users
    </a>

Now you understand how `queryParams` and `queryParamsHandling` can be used with `RouterLink`.

现在，您了解如何将`queryParams`和`queryParamsHandling`与`RouterLink`一起使用。

## 访问查询参数值 **(**Accessing Query Parameter Values**)** ##

Now that we know how to pass in optional query parameters to a route, let’s see how to access these values on the resulting routes. The `ActivatedRoute` class has a `queryParams` property that returns an observable of the query parameters that are available in the current URL.

现在，我们知道了如何将可选的查询参数传递给路由，让我们看看如何在生成的路由上访问这些值。 `ActivatedRoute`类具有`queryParams`属性，该属性返回可观察到的当前URL中可用的查询参数。

Given the following route URL:

给定以下路线URL：

http://localhost:4200/products?order=popular

We can access the `order` query parameter like this:

我们可以这样访问`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
          }
        );
      }
    }

In the console log, we would see the `params` object:

在控制台日志中，我们将看到`params`对象：

Output { order: "popular" }

And the `params.order` value:

和`params.order`值：

Output popular

There’s also `queryParamMap`, which returns an observable with a `paramMap` object.

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

Given the following route URL:

给定以下路线网址：

http://localhost:4200/products?order=popular&filter=new

We can access the query parameters like this:

我们可以像这样访问查询参数：

this.route.queryParamMap
      .subscribe((params) => {
        this.orderObj = { ...params.keys, ...params };
      }
    );

We used the [object spread operator][] here, and this is the resulting shape of the data in `orderObj`:

我们在这里使用了[对象散布运算符][object spread operator] ，这是`orderObj`数据的最终形状：

{
      "0": "order",
      "1": "filter",
      "params": {
        "order": "popular",
        "filter": "new"
      }
    }

Now, you have an understanding of how `queryParams` and `queryParamMap` can be used to access values on the resulting routes.

现在，您已经了解如何使用`queryParams`和`queryParamMap`访问结果路由上的值。

## 结论 **(**Conclusion**)** ##

In this article, you used different examples to set and get query parameters in Angular. You were introduced to `queryParams` and `queryParamsHandling` with `Router.navigate` and `RouterLink`. You were also introduced to `queryParams` and `queryParamMap` with `ActivatedRoute`.

在本文中，您使用了不同的示例来设置和获取Angular中的查询参数。 向您介绍了`queryParams`和`queryParamsHandling`的`Router.navigate`和`RouterLink` 。 还向您介绍了`ActivatedRoute` `queryParams`和`queryParamMap` 。

If you’d like to learn more about Angular, check out [our Angular topic page][] for exercises and programming projects.

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

> 翻译自: [https://www.digitalocean.com/community/tutorials/angular-query-parameters][https_www.digitalocean.com_community_tutorials_angular-query-parameters]

angular 参数映射

[Router.navigate]: https://www.digitalocean.com/community/tutorials/angular-navigation-routerlink-navigate-navigatebyurl#navigating-imperatively
[object spread operator]: https://www.digitalocean.com/community/tutorials/typescript-object-rest-spread
[our Angular topic page]: https://www.digitalocean.com/community/tags/angularjs
[https_www.digitalocean.com_community_tutorials_angular-query-parameters]: https://www.digitalocean.com/community/tutorials/angular-query-parameters