5

I'm using a custom pipe to filter a list of properties, and would like to add the selected filters to the url so that my customers can share the filtered list

If I use this, then the page will be reloaded:

this.router.navigate([], { relativeTo: this.activatedRoute, queryParams: { county: countyId }, queryParamsHandling: 'merge' });

I have tried to add this, but with the same result (but without writing to browser history):

skipLocationChange: true

The desired function is that when the pipe is used, I update the query parameters, and nothing ells, is this even possible?

The reason I don't want the page to reload, is that I have other stuff that I don't have to reload :)

Marcus
  • 111
  • 1
  • 6

2 Answers2

5

If you navigate to the route that uses the same component that you are already in, the component won't get reloaded.

So for example if your URL is siteurl/products and you navigate to siteurl/products with the query string, ngOnInit won't get called.

You get the new query params by subscribing to queryParams changes For example:

constructor(
    private activatedRoute: ActivatedRoute,
) { }

this.activatedRoute.queryParams.subscribe(params => {
    console.log(params);
    // logic after subscribing
});

You could also manually add query string params to the url and then manually parse them using for example uri.js: https://medialize.github.io/URI.js/, if you need more further control.

Gregor Ojstersek
  • 1,309
  • 4
  • 11
  • Hi Gregor, thank you for taking your time to help me. The problem is that I would like to add the query parameters from my pipe insted of the component, and I think this is the reason the page is reloaded. But I might be wrong – Marcus Aug 31 '18 at 10:19
0

Have a look on this.

I think answer from Simon McClive is what you need (Refer to onSameUrlNavigation option).

agascon
  • 614
  • 6
  • 21
  • Hi @agascon, thank you for your answer, I already use the `onSameUrlNavigation` in my router so that's not the solution – Marcus Aug 31 '18 at 10:22