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

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, you will pass in query parameters with queryParams.

如果您导航到使用势在必行路线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:

我们在这里使用了对象散布运算符，这是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主题页面，以获取练习和编程项目。

翻译自: https://www.digitalocean.com/community/tutorials/angular-query-parameters

angular 参数映射