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 wo