Ionic 4：使用角度路由器传递数据？答案

【问题标题】：Ionic 4: Pass data with angular router?Ionic 4：使用角度路由器传递数据？
【发布时间】：2019-11-21 18:32:25
【问题描述】：

使用 angular router 导航传递数据的最简单方法是什么？

【问题讨论】：

拜托，看看这个帖子：stackoverflow.com/questions/36835123/…
什么类型的数据？数字、字符串或对象

【解决方案1】：

在 ionic 4 中，您可以使用 NavController 将数据传递给组件，如下所示： 1. 在你的构造函数中

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

2。点击按钮

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

3。在目标页面接收

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

如果你想使用正确的角度路由，那么

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

目标页面

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

【讨论】：

【解决方案2】：

在你的 route.ts 中添加这个

Routes  = [ 

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

并且在您的 Component.ts 中，您可以使用以下行调用它 this.router.navigate(['AppComponentpath/' + this.String]);

【讨论】：