CODEWITHSUNDEEP
angularjsangular-routingionic4
SShah
SShah

Reputation: 263

Programatically navigate page with query params ionic 4

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" } });

Upvotes: 3

Views: 1450

Answers (1)

Remi Sture
Remi Sture

Reputation: 12998

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 } });

Upvotes: 2

Related Questions