Platform: Router Store does not save url parameters

Created on 12 Sep 2017  路  3Comments  路  Source: ngrx/platform

I'm submitting a...


[ ] Regression
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request

What is the current behavior?

URL parameters are not stored in the router state snapshot.

Expected behavior:

They should be.

Minimal reproduction of the problem with instructions:

This demo has a link 'Test parameter', which navigates to a route using a url parameter.
It also shows the current router state, which is created using a custom serializer.

It should display the url parameter, but only shows the url itself.

http://plnkr.co/edit/rgNb1U72etGOZmTQP8ey?p=preview

Version of affected browser(s),operating system(s), npm, node and ngrx:

Latest ngrx.

Other information:

Most helpful comment

Just copying Brandon solution for future reference:

export class CustomRouterStateSerializer implements RouterStateSerializer<RouterStateUrl> {
  serialize(routerState: RouterStateSnapshot): RouterStateUrl {
    const { url } = routerState;
    const queryParams = routerState.root.queryParams;

    let route = routerState.root;
    while (route.firstChild) {
      route = route.firstChild;
    }

    const params = route.params;
    return { url, params, queryParams };
  }
}

All 3 comments

Your example is incorrect. Query params are bound as an input to a routerLink. If you want route specific parameters, you have to traverse the route tree to get the params from the current ActivatedRoute.

Here is a working example: http://plnkr.co/edit/l0O9AE?p=preview

@brandonroberts Ahh thanks so much for clearing that up! I was indeed talking about route specific parameters and it really wasn't clear I'd need to traverse the tree for those. Might be nice to add your solution to the serializer doc!

Just copying Brandon solution for future reference:

export class CustomRouterStateSerializer implements RouterStateSerializer<RouterStateUrl> {
  serialize(routerState: RouterStateSnapshot): RouterStateUrl {
    const { url } = routerState;
    const queryParams = routerState.root.queryParams;

    let route = routerState.root;
    while (route.firstChild) {
      route = route.firstChild;
    }

    const params = route.params;
    return { url, params, queryParams };
  }
}
Was this page helpful?
0 / 5 - 0 ratings