如何在 Angular 中向 url 添加查询参数 - JavaScript

在 Angular 应用程序中，有时需要向请求的 URL 中添加查询参数。这可以通过 HTTP 请求将数据发送给服务器，也可以简单地在浏览器 URL 中添加查询参数，以便在前端应用程序中进行处理。在本文中，我们将介绍如何在 Angular 中向 URL 添加查询参数。

方法 1：使用 ActivatedRoute

Angular 中的 ActivatedRoute 服务提供了一个 queryParams 属性，它允许我们从当前 URL 中获取查询参数。我们可以通过这个服务来添加或修改查询参数。我们可以使用以下代码向 URL 添加新的查询参数：

import { ActivatedRoute, Router } from '@angular/router'; 

export class MyComponent {
  constructor(private route: ActivatedRoute, private router: Router) { }

  addQueryParams() {
    this.router.navigate([], {
      relativeTo: this.route, // 使用当前路由
      queryParams: { foo: 'bar' }, // 添加查询参数
      queryParamsHandling: 'merge' // 不覆盖之前的查询参数
    });
  }
}

在上面的代码中，我们使用了 router.navigate() 方法来导航到当前 URL，并向 queryParams 属性中添加了一个名为 foo 值为 bar 的查询参数。

如果我们之前已经有了一些查询参数，我们可以使用 queryParamsHandling 属性来告诉 Angular 如何处理它们。queryParamsHandling 属性有三个可选值，它们分别是：

• merge：将新查询参数合并到现有查询参数中。
• preserve：保留所有现有的查询参数，新查询参数会被添加到 URL 的末尾。
• merge：将新查询参数替换掉现有查询参数。

方法 2：使用 RouterLink

我们还可以使用 Angular 的 RouterLink 指令来向 URL 添加查询参数。可以在 HTML 模板中使用如下代码：

<a [routerLink]="['/my-route']" [queryParams]="{ foo: 'bar' }">Go to My Route</a>

在上面的代码中，我们使用了标准的 Angular routerLink 属性来导航到 /my-route 路径，并向 queryParams 属性中添加了一个名称为 foo、值为 bar 的查询参数。

方法 3：使用 ActivatedRouteSnapshot 和 RouterStateSnapshot

最后，我们还可以使用 ActivatedRouteSnapshot 和 RouterStateSnapshot 来向 URL 中添加查询参数。可以在组件的构造函数中使用如下代码：

import { Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

export class MyComponent {
  constructor(private router: Router) { }

  navigateWithQueryParams() {
    const url = this.router.createUrlTree(['/my-route'], {
      queryParams: { foo: 'bar' },
      queryParamsHandling: 'merge'
    });
    window.location.href = this.router.serializeUrl(url);
  }
}

在上面的代码中，我们先使用 createUrlTree() 方法创建一个包含查询参数的 URL 树。然后，我们使用 serializeUrl() 方法将 URL 树序列化为可以在浏览器中使用的字符串，并将其分配给 window.location.href 属性。

结论

通过上述三种方法中的任意一种，我们都可以向 URL 中添加查询参数。这使得在 Angular 应用程序中处理基于查询参数的过滤和排序等任务变得非常容易和直观。