router.navigate with query params Angular 5

Question

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

take a look at this alligator.io/angular/query-parameters

brijmcq
– brijmcq

2018-10-25 02:26:41 +00:00
Commented Oct 25, 2018 at 2:26 — brijmcq
– brijmcq, Commented Oct 25, 2018 at 2:26

KShewengger · Accepted Answer · 2021-05-27 23:46:41Z

165

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: { ... } })

edited May 27, 2021 at 23:46

answered Oct 25, 2018 at 2:25

KShewengger

8,3293 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bram · Accepted Answer · 2019-11-08 10:12:10Z

78

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

edited Nov 8, 2019 at 10:12

answered Nov 7, 2019 at 11:42

Bram

1,2169 silver badges10 bronze badges

3 Comments

Will Taylor Over a year ago

This is by far the simplest solution.

Haim Tabak Over a year ago

I also agree that this is the right and simplest solution. Especially when I get the URL from another source, so in this solution I do not have to deal with it, rather I can use it as it is.

Paul G Over a year ago

this works great and you can get the params from ActivatedRoute by subscribing like activatedRoute.params.subscribe

Adrita Sharma · Accepted Answer · 2020-10-27 11:55:53Z

27

Try like this:

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

edited Oct 27, 2020 at 11:55

answered Jun 17, 2020 at 13:44

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Comments

Smokey Dawson · Accepted Answer · 2020-11-11 02:10:04Z

7

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

This is better when the params are dynamic.

edited Nov 11, 2020 at 2:10

Smokey Dawson

9,29023 gold badges87 silver badges162 bronze badges

answered Nov 11, 2020 at 2:06

Harlin Acero

971 silver badge2 bronze badges

Collectives™ on Stack Overflow

router.navigate with query params Angular 5

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related