Ionic 4: Pass data with angular router?

Question

What is the simplest way to pass data with angular router navigation ?

Answer 1

in your route.ts add this

Routes  = [ 

{
    path: 'AppComponentpath/:param',
    component: AppComponent,
    data: {
      authorities: ['ROLE_ADMIN'],
      pageTitle: 'AppComponent'
  },
  canActivate: [UserRouteAccessService]
  }
]

and in your Component.ts you can call it by using the below line this.router.navigate(['AppComponentpath/' + this.String]);

Answer 2

In ionic 4, you can use NavController for passing data to component like this: 1. In your constructor

constructor(public navCtrl: NavController, private modalCtrl: 
ModalController){}

2. On button click

async viewPhoto(imagepath) {
const modal = await this.modalCtrl.create({
component: ViewphotoPage,
componentProps: {
 'url': imagepath
  }
});
return await modal.present();
}

3. Receiving on target page

 constructor(private navpar: NavParams){}
this.image = this.navpar.get('url');

If you want to use proper angular routing then

openDetailsWithQueryParams() {
let navigationExtras: NavigationExtras = {
  queryParams: {
    special: JSON.stringify(this.user)
  }
};
this.router.navigate(['details'], navigationExtras);
}

2. Target page

   constructor(private route: ActivatedRoute, private 
   router: Router) {
   this.route.queryParams.subscribe(params => {
   if (params && params.special) {
   this.data = JSON.parse(params.special);
    }
   });
   }