Javascript 带有查询参数的 router.navigate Angular 5
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52980345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
router.navigate with query params Angular 5
提问by Smokey Dawson
I'm having an issue with routing to a route with query params I have a function like so
我在路由到带有查询参数的路由时遇到问题我有一个像这样的功能
goToLink(link) {
this.router.navigate([`${link.split('?')[0]}`, { queryParams: this.sortParams(link)}]);
}
and this function
和这个功能
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;
}
okay so basically what Is happening I have a function called goToLink()and that takes in a url and the url that gets passed is a string with query params like so..
好的，所以基本上发生了什么我有一个函数被调用goToLink()，它接受一个 url，传递的 url 是一个带有查询参数的字符串，就像这样..
https://website.com/page?id=37&username=jimmy
https://website.com/page?id=37&username=jimmy
the above is just an example thats not what it actually looks like but its a link string with query parameters now so what happens is I remove the params from the string and store them in a data object in the sortParams()function so when I pass the above string in I get an object that looks like this
上面只是一个例子，它不是它实际的样子，而是一个带有查询参数的链接字符串，所以发生的事情是我从字符串中删除参数并将它们存储在sortParams()函数中的数据对象中，所以当我传递上面的字符串时在我得到一个看起来像这样的对象
{id: 37, username: 'jimmy'}
{id: 37, username: 'jimmy'}
now thats what i'm passing into the queryParams:section in the router.navigate,
现在这就是我传递到queryParams:router.navigate 部分的内容，
the function should look like this when the object is returned
返回对象时，该函数应如下所示
this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);
so i successfully route to the desired route but the query params look like this..
所以我成功地路由到所需的路线，但查询参数看起来像这样..
/page;queryParams=%5Bobject%20Object%5D
/page;queryParams=%5Bobject%20Object%5D
Am I doing something wrong here??
我在这里做错了吗？？
Any help would be appreciated!
任何帮助，将不胜感激！
EDIT
编辑
If I just change the function to this
如果我只是将功能更改为此
this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);
I get the same url /page;queryParams=%5Bobject%20Object%5D
我得到相同的网址 /page;queryParams=%5Bobject%20Object%5D
回答by KShewengger
Can be of that you had placed the bracket which is supposedly for the 1st param but you had encapsulated it on the whole line of route
可能是因为您已经放置了应该用于第一个参数的括号，但您已将其封装在整条路线上
Your code:
您的代码：
// 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 route:
更新路线：
place the ]close bracket within the 1st parameter only, try to not place it on the last part of the route statement.
将]右括号仅放在第一个参数内，尽量不要将其放在路由语句的最后一部分。
// Update end line: '}});'
this.router.navigate([`${link.split('?')[0]}`], { queryParams: {id: 37, username: 'jimmy'}});
回答by Bram
If you want to navigate to a URL string including query params, try using router.navigateByUrl.
如果要导航到包含查询参数的 URL 字符串，请尝试使用router.navigateByUrl。
For example:
例如：
this.router.navigateByUrl('/page?id=37&username=jimmy');
this.router.navigateByUrl('/page?id=37&username=jimmy');
