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

以上只是一个示例，实际上不是它的实际外观，而是一个带有查询参数的链接字符串，所以发生的事情是我从字符串中删除参数并将它们存储在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

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

更新路线：

仅将] 放在第一个参数内，不要将其放在route语句的最后一部分。

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

Answer 2

尝试这样：

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

Answer 3

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

例如：

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

Answer 4

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

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

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

4 个答案: