Automatically add queryParams when navigating on a specific Url

Question

I have a component "Browser" that is loaded when I navigate on a certain url ".../browser". The view is updated depending on some query parameters, so I can have an url like ".../browser?p=1".

I would like that the url ".../browser" automatically redirect to ".../browser?p=N" where N is a parameter that is requested and stored in a ngrx-store when we launch the application.

I tried to add this when initializing the "Browser" component:

ngOnInit(): void {
  this.store.select((s: AppState) => s.media.rootMediaId)
    .combineLatest(this.route.queryParams, (root, query) => {
      return {root, query};
    })
    .subscribe(({root, query}) => {
      this.rootId = root;
      if (query['p'] === undefined) {
        this.router.navigate([''], { relativeTo: this.route, queryParams: {p: this.rootId} });
      }
    })

  [...]
}

So, I subscribe to both the rootMediaId and the queryParams, to update the route when I get the rootMediaId and if the queryParams are undefined.

It work well when I first load the Browser component. But If I navigate in my app and if I return on ".../browser" it don't work anymore. I logged in the console the response of the Promise this.router.navigate(...) and it was false, so the router don't navigate. Can I force the actualising of the query params, or is it an other way to do want I want?

Thank you,

S. Caruso S. Caruso · Accepted Answer · 2017-03-15T14:09:37

I found a way around the problem. I update the view in the special case where there aren't any query params, so as if there where "p=N" as query params... It doesn't answer to the question I asked here, but it is sufficient for my usage.

Automatically add queryParams when navigating on a specific Url

1 Answers