What is the simplest way to pass data with angular router navigation ?
2
-
3Please, Take a look at this post : stackoverflow.com/questions/36835123/…ChillAndCode– ChillAndCode2019-11-21 10:09:30 +00:00Commented Nov 21, 2019 at 10:09
-
what type of data? number, string or objectShriniwas b– Shriniwas b2019-11-21 10:09:39 +00:00Commented Nov 21, 2019 at 10:09
Add a comment
|
2 Answers
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);
}
Target page
constructor(private route: ActivatedRoute, private router: Router) { this.route.queryParams.subscribe(params => { if (params && params.special) { this.data = JSON.parse(params.special); } }); }
Comments
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]);
