问题描述
在项目中,我们经常会遇见新增表单的情况,如登录注册、列表项新增,那么在这种情况下,如果我们用常用的push来跳转页面,在新增完后,如果跳转到新增前页面,就会有返回箭头,按手机返回键也会导致页面回到新增表单页,这样用户体验很不好,解决的办法是用,modal组件和ViewController组件来完成这种操作
解决办法
1.跳转前页面
引入modal组件
1 2 3 | import {ModalController} from 'ionic-angular'; constructor(public modalCtrl: ModalController){} |
跳转到表单添加页面
1 2 3 4 5 6 7 8 9 10 11 | gotoLeaveAddPage() { let modal = this.modalCtrl.create('LeaveAddComponent',{ leave:this.leave }); modal.onDidDismiss(data => { //核心功能,在这里刷新,即重新查一遍即可 console.log(data); }); modal.present(); } |
LeaveAddComponent是跳转页面路径
leave是传输数据
这里的重点是onDidDismiss()方法,通过这个方法,可以拿到跳转后的页面传过来的数据,怎么传数据下面会讲。
2.跳转后页面
1 2 3 4 5 6 7 8 9 10 | 引入ViewController组件 import {ViewController} from 'ionic-angular'; constructor(public viewCtrl: ViewController){} 使用dismiss()方法关闭页面,并传输数据 this.viewCtrl.dismiss({ 'danyuan_id': this.danyuan_id, }) |
数据传输后,通过跳转前页面的,onDidDismiss()方法接收数据,并且在该方法内重新加载一次接口即可刷新数据。这样按返回就不会跳到表单页。
7