Angular 5 global query parameter

Question

I would like to add a global query parameter to each path of the application (something like /my/path?config=foo). I don't wanna use the perserve query params option as it preserves all query params and I only want to preserve this specific one.

My application does run with different configurations that can be chosen by the user who runs it. This choice is currently saved in the configuration service and is gone when closing or reloading the tab/window. I can't save the choice in the local storage or session as it is possible to have different configurations open in multiple tabs of the same browser (and as far as I know the local storage is global through all tabs of a browser - if it's not in incognito mode or similar).

But I want my users to have the option to copy the current url and send it to somebody else who get's the exact same data and configuration as the user who sent the link.

Therefore I would like to automatically attach a "config" query parameter to each url of the application as soon as the user chose a configuration setting.

Answer 1

My suggestion is to redefine your routing strategy, and has the same routing parameter for every Component you want to use the configuration.

Define your routing in a way that it has a special parameter:

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'example-path,
    canActivate: [AuthGuard],
    children: [
      {
        path: ':example-parameter-path',
        canActivate: [AuthGuard],
        children: [
          {
            path: ':configuration',
            component: YourComponent
          },
      {
        path: '',
        component: YourComponent,
        pathMatch: 'full'
      },
    ]
  },
...
];

Then, in the components you want to access that configuration, you can get it from the Activated route:

 private subscribeToUrlChange() {
    this.activatedRoute
      .params
      .subscribe(
        params => {
          console.log([params['configuration'])
        }
      );
  }

Answer 2

I think I'm a little late for the bounty but here the implementation. In your app.component.ts

import { Router, NavigationEnd } from '@angular/router';

  constructor(private route: Router) {
    let flag = 0;
    this.route.events.subscribe((event) => {
      if(event instanceof NavigationEnd) {
        console.log(event);

        if(event.url.indexOf('?') === -1)  {
          this.route.navigate([event.url], { queryParams: { config: 'popular' } });
        }   
      }      
    })
  }
}

The stackblitz demo here: https://stackblitz.com/edit/angular-router-basic-example-t5w3gz

We can modify if needed to work in accordance to the activated route So instead of using simple indexOf you can check if the specified query param is present.

Answer 3

You could add an optional parameter when ever the user choose or sets a configuration using the navigate function in the Router class. Navigating to the same route does not recreate the component or fire ngOnInit. Adding optional parameters does not require defining new routes in your application and it would look like this: localhost:3000/heroes;config=foo

Most developers (Including me) expected that navigating to the same route using different parameters should recreate the component but this is not the default behavior. You could take a look to this question to read more about this: Router Navigate does not call ngOnInit when same page or visit the Angular documentation for routing: https://angular.io/api/router/RouterModule

To read the parameter from the URL if the user reloads the page or copy paste the url you could subscribe the AcivatedRoute params and read the parameter.

Answer 4

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

Or when using router:

router.navigate('/login', { queryParamsHandling: "preserve" }) The other possible option for queryParamsHandling is merge.