Ionic 5, Angular 9 Remove query params from URL

Question

I have PWA and a mobile app with Ionic 5. I click a URL in an email that redirects me using universal links.

https://example.com/?param1=value1&param2=value2

My goal is to use params to create a new object when the page loads and after that to remove the params and navigate to the next page. I use a location which looks like this.

this.route.queryParams.subscribe(
  params => {
    if (params.create) {
      const navParams = params;

      // Do something with params         

      this.location.replaceState("/");
      this.navCtrl.navigateForward("/another-page/:id)
    }
  }
)

This all works good and params are removed from URL, but the problem is when I navigate back using ion-back-button it sends me back to the home page but params get loaded again. I guess that the queryParams are not completely cleared with this.location.replaceState("/") .

I tried this.navCtrl.setRoot("") before I navigate to the next page, but that did not work.

Can you advise? Thanks.

Answer 1

Try to navigate to a page like this when you do this.navCtrl.navigateForward :

https://example.com/nextpage/?params

by adding nextpage between it will do what you want to achieve but it will add that extra nextpage to your url

this way when you navigate back the previous param will gone.

Answer 2

Not sure if you managed to resolve this but you could try this...

import { ActivatedRoute } from '@angular/router';

...
...

const paramValue = this.activatedRoute.snapshot.queryParamMap('paramKey');