带有查询参数Angular 5的router.navigate

Posted 2023-02-22

【中文标题】带有查询参数Angular 5的router.navigate

【英文标题】：router.navigate with query params Angular 5

【发布时间】：2019-03-29 12:56:07

【问题描述】：

我在使用查询参数路由到路由时遇到问题我有这样的功能

goToLink(link) 
    this.router.navigate([`$link.split('?')[0]`,  queryParams: this.sortParams(link)]);

还有这个功能

sortParams(link) 
    let queryParams = url.split('?')[1];
    let params = queryParams.split('&');
    let pair = null;
    let data = ;
    params.forEach((d) => 
      pair = d.split('=');
      data[`$pair[0]`] = pair[1];
    );
    return data;

好吧，所以基本上发生了什么我有一个名为goToLink()的函数，它接受一个url，传递的url是一个带有查询参数的字符串，像这样......

https://website.com/page?id=37&username=jimmy

上面只是一个例子，它不是它实际上的样子，而是一个带有查询参数的链接字符串，所以我从字符串中删除参数并将它们存储在sortParams()函数中的数据对象中所以当我传入上面的字符串时，我得到一个看起来像这样的对象

id: 37, username: 'jimmy'

现在这就是我要传递到 router.navigate 中 queryParams: 部分的内容，

返回对象时函数应该是这样的

this.router.navigate([`$link.split('?')[0]`,  queryParams: id: 37, username: 'jimmy']);

所以我成功路由到所需的路由，但查询参数看起来像这样..

/page;queryParams=%5Bobject%20Object%5D

我在这里做错了吗？

任何帮助将不胜感激！

编辑

如果我只是把函数改成这个

 this.router.navigate([`$link.split('?')[0]`,  queryParams: id: 37, username: 'jimmy']);

我得到相同的网址/page;queryParams=%5Bobject%20Object%5D

【问题讨论】：

看看这个alligator.io/angular/query-parameters

【参考方案1】：

可能是您放置了本应用于第一个参数的括号，但您已将其封装在整条路线上

您的代码：

// This is the end of your route statement:  ']);' which the close bracket is included
this.router.navigate([`$link.split('?')[0]`,  queryParams: id: 37, username: 'jimmy']);

更新路线：

仅将 ] 右括号放在第一个参数内，尽量不要将其放在路由语句的最后部分。

// Update end line: ');'
this.router.navigate([`$link.split('?')[0]`],  queryParams: id: 37, username: 'jimmy');

---

总结：

this.router.navigate([ url ],  queryParams:  ...  )

【参考方案2】：

如果您想导航到包含查询参数的 URL 字符串，请尝试使用 router.navigateByUrl。

例如：

this.router.navigateByUrl('/page?id=37&username=jimmy');

【讨论】：

这是迄今为止最简单的解决方案。

我也同意这是正确且最简单的解决方案。尤其是当我从其他来源获取 URL 时，因此在此解决方案中我不必处理它，而是可以按原样使用它。

【参考方案3】：

试试这样：

this.router.navigate(['my-route', 37],  queryParams:  username: "jimmy");

【参考方案4】：

this.router.navigateByUrl('/page?id=37&username=jimmy');

当参数是动态的时，这会更好。