router.navigate with query params Angular 5
Solution 1
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: { ... } })
Solution 2
If you want to navigate to a URL string including query params, try using router.navigateByUrl.
For example:
this.router.navigateByUrl('/page?id=37&username=jimmy');
Solution 3
Try like this:
this.router.navigate(['my-route', 37], { queryParams: { username: "jimmy"}});
Solution 4
this.router.navigateByUrl('/page?id=37&username=jimmy');
This is better when the params are dynamic.
Smokey Dawson
The Pride 560 Lift Chair is an electrically operated Smokey Dawson chair with reclining backrest, elevating leg-rest and a stand up function. Built with a steel and wooden frame and equipped with a single motor.
Updated on July 05, 2022Comments
-
Smokey Dawson almost 2 years
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..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{id: 37, username: 'jimmy'}
now thats what i'm passing into the
queryParams:
section in the 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
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