Angular 9 dynamic routes

Question

first of all sorry for my english i dont speak very well but I will try to explain myself, I'm creating an eCommerce in Angular 9 and the routes of this eCommerce work as follows, every route that comes in the end with .html I direct to a component that I call router-redirects, when I fall into that component I call the ecommerce api passing the url in question then it returns if that url is a category, a product, an article.. with this answer I redirect to the right component.

The problem is that in certain situations like the categories page I need to leave some query strings like pageIndex and orderby in the URL but angular does not show the query strings because when I do the navigate I put skipLocationChange: true because I cannot change the url and I need to keep the queryString.

I only need this for when a user wants to share the url with someone else.

Example of how I am doing the navigate method:

this.router.navigate(['categoria-listagem'], {
      skipLocationChange: true,
      queryParams: { page: 1, order: 'novidades' }
});

Please if anyone knows a better way to do this redirection or know how to keep query strings even with skipLocationChange it would save me !!

Thank you in advance.

Answer 1

It sounds like you should add queryParamsHandling as 'merge' or 'preserve' (depending on your requirements) eg

this.router.navigate(['categoria-listagem'], {
  skipLocationChange: true,
  queryParams: { page: 1, order: 'novidades' },  
  queryParamsHandling: "merge"
});

This should add your new query params to any already in your URL.

Also you may need to remove skipLocationChange , again depending on the functionality you need.