使用查询参数进行路由导航 Angular 5

Question

我在路由到带有查询参数的路由时遇到了问题，我的函数如下：

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字符串，如下所示：

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

- Smokey Dawson

---

请查看此链接 https://alligator.io/angular/query-parameters/ - brijmcq

Answer 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: { ... } })

- KShewengger

Answer 2

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

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

- Bram

---

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

我也同意这是正确且最简单的解决方案。特别是当我从其他来源获取URL时，使用这种解决方案可以避免处理它，而是直接使用它。 - Haim Tabak

这很有效，你可以通过订阅"activatedRoute.params.subscribe"来获取ActivatedRoute的参数。 - Paul G

Answer 3

试试这样：

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

- Adrita Sharma

Answer 4

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

当参数是动态的时候，这种方法更好。

- Harlin Acero