离子4:通过角度路由器传递数据?

时间:2019-11-21 10:07:15

标签: angular ionic4

使用角度路由器导航传递数据的最简单方法是什么?

2 个答案:

答案 0 :(得分:0)

在您的route.ts中添加此

Routes  = [ 

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

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

答案 1 :(得分:0)

在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);
}
  1. 目标页面

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