router.navigate with query params 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

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

{id: 37, username: 'jimmy'}

现在这就是我传递到queryParams:router.navigate中的部分,

返回对象时,该函数应如下所示

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

Answer 1

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

例如：

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

Answer 2

你可以放置一个据说是第一个参数的支架,但是你把它封装在整条路线上

你的代码:

// 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'}}]);

更新路线:

请将]第1个参数中右括号只,尽量不要把它放在航线声明的最后部分.

// Update end line: '}});'
this.router.navigate([`${link.split('?')[0]}`], { queryParams: {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');

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