Programatically navigate page with query params ionic 4

Question

I want to pass data to another page. My app-routing.module is like this :

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'web-page/:url', loadChildren: './web-page/web-page.module#WebPagePageModule' },
  { path: 'qrscan', loadChildren: './qrscan/qrscan.module#QrscanPageModule' },

];

With HTML i can successfully pass data :

   <ion-button expand="full" [routerLink]="['/web-page/', urlBooking]" routerDirection="forward">BOOKING</ion-button>

But i am struggling to do in typescript :

this.router.navigate(['web-page'], { queryParams: { 'url': "https://apple.stackexchange.com/questions/180387/xcode-failed-to-download-use-the-purchases-page-to-try-again" } });

Answer 1

You dont say anything about what's not working, but you might want to url encode your query param. This should work just fine. And use decodeURIComponent where you use that param.

const url = encodeURIComponent("https://apple.stackexchange.com/questions/180387/xcode-failed-to-download-use-the-purchases-page-to-try-again");
this.router.navigate(['web-page'], { queryParams: { url } });