[英]router.navigate with query params Angular 5
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
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'}
now thats what i'm passing into the queryParams:
section in the router.navigate,现在这就是我传递到
queryParams:
部分的内容,
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
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
我得到相同的 url
/page;queryParams=%5Bobject%20Object%5D
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'}});
Summary:概括:
this.router.navigate([ url ], { queryParams: { ... } })
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.navigate(['my-route', 37], { queryParams: { username: "jimmy"}});
this.router.navigateByUrl('/page?id=37&username=jimmy');
当参数是动态的时,这会更好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.