Let's say we have a following use case:

• we have some filters on the page. On filter selection, we need to add the filter's value to the URL as a query param (by navigating to the same page by either using router.navigate or router.navigateByUrl
• Example value of a filter that breaks the functionality: "Value one, comma separated"
• a filter can also contain multiple, comma-separated values, e.g. param1=one,two

Is there a way to nicely encode the comma of a single value, but to keep the commas that separate the multiple values? So, the goal would be to navigate to something like: param1=value1%2Ccomma%20separated,value2

Calling this:

    this.router
      .navigate([], {
        relativeTo: this.route,
        queryParams: { partner: 'Partner one, comma separated' },
        replaceUrl: true,
      })

makes the navigation to the following URL: blah.com?partner=Partner%20one,%20comma%20separated

And calling this:

    this.router
      .navigate([], {
        relativeTo: this.route,
        queryParams: { partner: 'Partner one%2C comma separated,Partner two' },
        replaceUrl: true,
      })

makes the navigation to the following URL: blah.com?partner=Partner%20one%252C%20comma%20separated,Partner%20two

My goal is to navigate to something like this: <current URL>?partner=Partner%20one%2C%20comma%20separated,Partner%20two (without %25 double-encoding)

so there is a way for our backend to tell which comma is actually separating the values, and which is a part of a single value.

Also, this:

    this.router.navigateByUrl(`/my-page?partner=Partner%20one%2Ccomma%20separated`);

navigates to blah.com/my-page?partner=Partner%20one,comma%20separated (the comma got decoded).

I've tried a combination of decodeURI, encodeURIComponent etc before passing it to router.navigate or router.navigateByUrl, but nothing seems to be doing the trick.