写一篇简单的,有这样一种业务场景:当使用push后,页面导航栏会自动添加后退按钮,当点击后退按钮后,拦截事件(如付费进来了,没有完成后续操作就后退退出,良好的用户体验是必须给出提示,防止误操作)。
基于此,起码有两种方式:
1、重写导航栏的后退按钮点击方法,具体操作为:
头顶添加引用:
import { IonicPage, NavController, NavParams, Navbar } from 'ionic-angular';
类里添加注解变量:
@ViewChild(Navbar) navbar: Navbar;
最后在页面生命周期方法ionViewDidLoad添加逻辑操作(写在此方法中是保障页面已经加载完成,保证此时this.navbar为有值,不然赋值方法会报错):
ionViewDidLoad() {
this.navbar.backButtonClick = (e)=>{
console.log(e);
};
}
执行上述方法后,事件被拦截,页面不会后退,需要自己手动写navCtrl.pop()等类似导航方法。
此方法的弊端是:只能拦截点击事件,如果是一些非法后退操作呢?如ios端的左滑后退,android的物理键后退,或者某个操作手动调用navCtrl.pop()的方法,这样就会失效。
2、利用ionViewCanLeave
给定一个标志变量:
canLeave:boolean = false;
然后在逻辑操作中控制这个标志即可,最后在方法里面判断:
ionViewCanLeave() {
return this.canLeave;
}