Set default query params while routing

Question

I've the following route config:

const routes: Routes = [
  // another routes
  { component: UsersListComponent, path: 'users' }
];

I want to "automatically" include some default QUERY parameters when something route to this.

E.g.:

The route /users become /users?p=1s&15, when it has NO query parameters.

I just got stucked trying to do it with guards (I'm not even sure that's the best choice for do this). Below is a piece of my actual code:

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    // Just for make it clear:

    if (state.url === '/users') {
      this.router.navigate([], {
        queryParams: {
          p: 1,
          s: 15
        },
        relativeTo: this.activatedRoute
      });
    }

    return true;
  }
}

Stacbklitz link

terahertz · Answer 1 · 2019-07-29T02:08:47.030

You're missing a return false in your canActivate() guard. Also, this.router.navigate([]) navigates you to your current route, which can be /my-default-page, etc. Hence, it navigated you to /my-default-page?p=1&s=15. It wasn't navigating you to your next route with query params, /users?p=1&s=15.

However, because the canActivate() guard always returned true, you were still navigated to /users.

To fix this:

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
      console.log('state', state.url)
    if (state.url === '/users') {
      console.log("true");
      this.router.navigate([state.url], { //need to change this to state.url, which is your next route 
        queryParams: {
          p: 1,
          s: 15
        },
        relativeTo: this.activatedRoute
      });
      return false; //you're missing this
    }

    return true;
  }

Also, since your use case requires /users without query parameters to always be routed to /users?p=1&s=15, you should shift your canActivate:[myAuthGuard to the users route.

E.g.

... //other routes

{
  path: 'users',
  canActivate: [MyAuthGuard],
  component: MyComponent,
  runGuardsAndResolvers: "always" //add this to always trigger AuthGuard
},

...

forked stackblitz

Thanks for you answer. I got a small problem with your solution: if I press the `users` route more than one time, all the query params are erased. Do you know how to solve this? — dev_054, Jul 29 '19 at 01:08
opps, I missed that, that can be fixed by adding `runGuardsAndResolvers: "always",` to always trigger the AuthGuard. If you wanna find out more on how it works, have a read here: https://angular.io/api/router/Route#runGuardsAndResolvers. I have edited my answer — terahertz, Jul 29 '19 at 02:08

Set default query params while routing

1 Answers1