Manually convert Object/String a route query param string

Question

In our Angular app, we are using query params. The params correlate to configuration settings, that can change often. Here's what we're currently using:

this.router.navigate([], {
   relativeTo: this.activatedRoute,
   queryParams: controlData,
   queryParamsHandling: "merge" // preserve the existing query params in the route
});

This doesn't "navigate", BUT it does add to the browser history (if I double click on the browser back arrow, I'll see a long list of all the times I've made minor changes to the query params.

I don't want to add to the history, instead I'd like to use history.replaceState() The only problem is, I need to translate that queryparam object to a route string. If I just try to use JSON.stringify(), it won't be correct because there's characters that the route doesn't except.

How can I convert this object of values to a route string?

Flo · Accepted Answer · 2023-01-17 18:04:07Z

1

You can use the property replaceUrl and set it to true in the router.navigate. So you replace the url and don't push a new to the history.

This method will be called by a button click as example.

clickOnButtonAndRouting() {
    let controlData = {hallo: "Hello"};

    this.router.navigate([], {
      relativeTo: this.activatedRoute,
      queryParams: controlData,
      queryParamsHandling: "merge", // preserve the existing query params in the route
      replaceUrl: true
    });

answered Jan 17, 2023 at 18:04

Flo

3,3022 gold badges15 silver badges29 bronze badges

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

1 Comment

ineedtoknow Over a year ago

Wow, exactly what I was looking for and I don't have to use history.replaceState()! TY!

Collectives™ on Stack Overflow

Manually convert Object/String a route query param string

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related