【技巧】ionic3的页面导航后退事件拦截 (实用、赞）

原文出处：【技巧】ionic3的页面导航后退事件拦截-腾讯云开发者社区-腾讯云

写一篇简单的，有这样一种业务场景：当使用push后，页面导航栏会自动添加后退按钮，当点击后退按钮后，拦截事件（如付费进来了，没有完成后续操作就后退退出，良好的用户体验是必须给出提示，防止误操作）。 基于此，起码有两种方式：

1、重写导航栏的后退按钮点击方法，具体操作为：

头顶添加引用：

代码语言：javascript

import { IonicPage, NavController, NavParams, Navbar } from 'ionic-angular';

类里添加注解变量：

代码语言：javascript

 @ViewChild(Navbar) navbar: Navbar;

最后在页面生命周期方法ionViewDidLoad添加逻辑操作（写在此方法中是保障页面已经加载完成，保证此时this.navbar为有值，不然赋值方法会报错）：

代码语言：javascript

  ionViewDidLoad() {
    this.navbar.backButtonClick = (e)=>{
      console.log(e);
    };
  }

执行上述方法后，事件被拦截，页面不会后退，需要自己手动写navCtrl.pop()等类似导航方法。

此方法的弊端是：只能拦截点击事件，如果是一些非法后退操作呢？如ios端的左滑后退，android的物理键后退，或者某个操作手动调用navCtrl.pop()的方法，这样就会失效。

2、利用ionViewCanLeave

给定一个标志变量：

代码语言：javascript

canLeave:boolean = false;

然后在逻辑操作中控制这个标志即可，最后在方法里面判断：

代码语言：javascript

ionViewCanLeave() {
    return this.canLeave;
  }