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.
this._router.navigate(['./', filter.params], {relativeTo: this.route})work?this.routeis the injected ActivatedRoute.TypeError: Cannot read property 'path' of undefined at createNewSegmentGroup. It seems the Router creates a urlTree from the activated route (I can see it from the stack trace) and encounters something that is undefined which would provide the path ...this._router.navigate(['./p', filter.validParams], {relativeTo: self._activeRoute});which gave melist/123;page=2/pif that helps. At least it is recognizing the relative path (there is an appended/p).