router.navigate 查询参数 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 并且传递的 url 是一个带有查询参数的字符串，就像这样。 .

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

上面只是一个例子，它不是它实际看起来的样子，而是一个带有查询参数的 link 字符串，所以我从字符串中删除参数并将它们存储在数据对象中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'}}]);

我也一样url/page;queryParams=%5Bobject%20Object%5D

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

Answer 2

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

例如：

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

Answer 3

这样试试：

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

Answer 4

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

如果参数是动态的，这会更好。

router.navigate 查询参数 Angular 5

router.navigate with query params Angular 5

javascript

typescript

angular

angular-router