router.navigate with query params Angular 5

JavascriptAngularTypescriptAngular Router

Javascript Problem Overview


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

Javascript Solutions


Solution 1 - Javascript

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 - Javascript

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 - Javascript

Try like this:

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

Solution 4 - Javascript

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

This is better when the params are dynamic.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSmokey DawsonView Question on Stackoverflow
Solution 1 - JavascriptKShewenggerView Answer on Stackoverflow
Solution 2 - JavascriptBramView Answer on Stackoverflow
Solution 3 - JavascriptAdrita SharmaView Answer on Stackoverflow
Solution 4 - JavascriptHarlin AceroView Answer on Stackoverflow