Angular：如何向URL添加查询参数

Question

Angular：如何向URL添加查询参数

angularangular2-routingquery-stringangular2-router

68

我正在使用这个：

    import { HttpParams } from '@angular/common/http';
    let params = new HttpParams();
    params.append('newOrdNum','123');

但这不起作用，我没有在URL中添加参数。有什么建议吗？

- None

你想要像 https://example.com/newordnum/123 这样的参数吗？ - Salim Ibrohimi

2

可能是为什么HttpParams在Angular 4.3中不能在多行中工作的重复问题。 - Jota.Toledo

我想在现有参数的基础上添加。我有类似这样的东西：example.com?param1=111，现在我想要添加以获得example.com?param1=111&newOrdNum=123。 - None

你是想发送带有查询参数的请求，还是想改变浏览器URL的当前状态？如果是后者，那么你需要更好地解释你想要实现什么。 - Jota.Toledo

我只想将参数附加到URL上...我会在其他步骤中处理该参数...但现在只是将其附加到已有其他参数的现有URL上。 - None

显示剩余2条评论

7个回答

41

我不得不稍微调整Jota.Toledos的答案，以便它对我起作用，我必须删除extras对象的第二个和最后一个属性：

   navigateToFoo(){
     this._router.navigate([], {
      queryParams: {
        newOrdNum: '123'
      },
      queryParamsHandling: 'merge',
    });
   }

- Jan Clemens Stoffregen

1

当你的查询参数被改变时，这是否也会反映在 URL 中？ - Tisha

5

你应该编写

let params = new HttpParams();
params = params.append('newOrdNum','123');

- Ula

那么（如何使用新创建的params变量）？否则这没有解决/执行任何操作，也没有回答所发布的问题。 - Tony

3

this.router.navigate(['.'], { relativeTo: this.route, queryParams: { 'a': 'b' }, queryParamsHandling: 'merge', skipLocationChange: true});

路由器：Router 路由：ActivatedRoute

- Giggs

2

您应该使用Router模块。请查看此文档：https://angular.io/guide/router

您需要导入以下模块：import { Router, ActivatedRoute, ParamMap } from '@angular/router';

- Salim Ibrohimi

如何在路由器上仅追加现有内容，而无需编写路径？ - None

@None: 正在使用 Router。 - Salim Ibrohimi

@None：请阅读此文档：https://angular.io/api/common/http/HttpParams - Salim Ibrohimi

1

你需要从 Angular 路由器获取当前查询参数的状态，修改这些属性（添加/删除参数），然后使用路由器重新分配它：

// Make sure to import and define the Angular Router and current Route in your constructor
constructor(
  private router: Router,
  private route: ActivatedRoute
) {}

...
...
...

// Take current queryParameters from the activated route snapshot
const urlParameters = Object.assign({}, this.route.snapshot.queryParams); 

// Need to delete a parameter ?
delete urlParameters.parameterName;

// Need to add or updated a parameter ?
urlParameters.parameterName = newValue;

// Update the URL with the Angular Router with your new parameters
this.router.navigate([], { relativeTo: this.route, queryParams: urlParameters });

你甚至可以进一步构建一个实用函数来完成这个操作：

handleUrlParameters(paramsToAdd: {param: string}[], paramsToDelete?: string[]) {
  const urlParameters = Object.assign({}, this.route.snapshot.queryParams); 

  paramsToDelete.forEach(param => delete urlParameters[param]);

  Object.keys(paramsToAdd).forEach(param => urlParameters[param] = paramsToAdd[param]);

  this.router.navigate([], { relativeTo: this.route, queryParams: urlParameters });
}

然后，您只需使用将参数映射到新值的对象或要删除的参数名称数组调用handleUrlParameters即可。

- Jeff Gilliland

1

确保在传递查询参数值时不应为未定义。

      this.router.navigate([yourRoute,
         queryParams : 
              {
                key : (yourValue ? yourValue : '')
              },
         queryParamsHandling: 'merge'
            ]);

- Bharat chaudhari

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jota.Toledo · Accepted Answer

通过使用Router类可以实现这一点：使用组件：

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

@Component({})
export class FooComponent {
   constructor(
     private _route: ActivatedRoute,
     private _router: Router
   ){}

   navigateToFoo(){
     // changes the route without moving from the current view or
     // triggering a navigation event,
     this._router.navigate([], {
      relativeTo: this._route,
      queryParams: {
        newOrdNum: '123'
      },
      queryParamsHandling: 'merge',
      // preserve the existing query params in the route
      skipLocationChange: true
      // do not trigger navigation
    });
   }
}

如需更多信息，请查看这本书以及 Angular 的 Router API