CODEWITHSUNDEEP
angularroutes
the_critic
the_critic

Reputation: 12820

Router Navigation and Query Parameters in Angular2 [RC5]

I am trying to do the following:

In very abstract terms, I have a ListComponent and a FilterComponent. The ListComponent contains a list of resources and the filter's job is to filter those resources (the filter is an actual component displayed alongside the list, backed by a filter model).

I want the filter to work on multiple different routes, as the ListComponent lives in several locations. The challenge is to collect the filter properties from the filter and reflect them in the query params of the route, so if /list is the current route and we change the filter component's properties (by clicking some filters, let's call them foo and bar), the route should change to /list;foo=X;bar=Y.

Is there any easy way to achieve this ? If there was a way to do something like this in the ListComponent:

this._router.navigate(['./', filter.params])

which effectively would route to the route we are currently on, merely updating the parameters. This would be nice (if we assume that the route is not nested in any way).

As this does not seem to be possible, I tried something like this in the ListComponent:

ngOnInit(){

    this._activeRoute.url
    .subscribe(
      (data) => {

        this._url = "/" + data.map(urlPathWithParams => urlPathWithParams.path ).join("/");  
      }
    )

  }

which basically goes ahead, gets the current url upon initiation and stores it in a local variable to be used when the filter changes in this method: 

applyFilter(){
  this._router.navigate([this._url, filter.validParams]);
}

This seems to work at first, but if I route to a different component that inherits from ListComponent, the _activeRoute (ActivatedRoute) that is injected returns an empty object for the url Observable in the ListComponent's ngOnInit().

I am not sure if I'm on the right track with this, but I'd also be looking for answers that pose a different approach to this issue.

Upvotes: 2

Views: 1201

Answers (1)

the_critic
the_critic

Reputation: 12820

This seems to have been an issue in RC5, fix was merged into master.

https://github.com/angular/angular/commit/c7f3aa71fb4f8b8b3b69c1f6fb94883de992c743

Upvotes: 2

Related Questions