20

Background:

The user calls the app's url with the parameters and uses my app. While switching between different routes the url parameters should be kept visible in the browser's address bar.

I have to keep the query parameters on each route of my app. That means if I have the url

www.example.com/app/test?id=326748798342&state=1

and call a link with [routerLink]="['/login']" I have to get this url:

www.example.com/app/login?id=326748798342&state=1.

On default I get the login route without the parameters. I found one solution that says to set queryParamsHandling='merge'. But this is a very bad solution because that would mean to change all links in templates and all navigate() calls.

Is there a cleaner way to solve this problem on default? Something such setting queryParamsHandling in the routes array for the app or something else?

Community
  • 1
  • 1
julianpoemp
  • 1,965
  • 3
  • 14
  • 29
  • Are you passing the `id` and `state` query params to an api or another component? – Wallace Dec 27 '17 at 16:26
  • In this example "test" and "login" are both components that should be able to read the query parameters. I'm not passing the params to an api. – julianpoemp Dec 27 '17 at 16:29
  • I'm not confident I really understand what the problem is. But, I think you could just put `Id` and `state` into `localstorage`, a `Service` or `ngrx Store` and retrieve it to be used in your components without even adding to Url. – Wallace Dec 27 '17 at 17:03
  • Thank you, but your suggestion doesn't solve my problem. The user calls my app's url with the parameters and uses my app. While switching between different routes the url parameters should keep visible in the browser's address bar. – julianpoemp Dec 27 '17 at 17:25

1 Answers1

18

Currently there is no way to set it globally. Using queryParamsHandling seems to be the only option:

<a [routerLink]="['/login']" queryParamsHandling="preserve"></a>

Or when using router:

router.navigate('/login', { queryParamsHandling: "preserve" })

The other possible option for queryParamsHandling is merge.

Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
  • 1
    that is something I already wrote in my post above. I want to set this globally. – julianpoemp Dec 27 '17 at 18:44
  • 1
    @geronimo678, I understand, I just wanted to answer that there's no way to set it globally at the moment and passing `queryParamsHandling` either through `routerLink` or `navigate` is the only option now. Of course, you could implement your own variant of `routerLink` or decorate `Router` but that doesn't seem like a good approach – Max Koretskyi Dec 28 '17 at 16:41
  • I appreciate your help. It seems that I have to use this only solution. Perhaps there is some better solution in the future... – julianpoemp Dec 28 '17 at 16:56
  • 1
    @geronimo678, I'll update the answer and let you know if I come across one – Max Koretskyi Dec 28 '17 at 17:01
  • I would solve issue by creating a service which generates url for routerLink. e.g. routerLink=urlService.getLink(['login']) that service function would than handle the merging, preserving and/or removal of url query params – isawk Mar 06 '18 at 08:07