IONIC即将离开当前页面时,强制给出提示

   即将离开当前页面,当不符合要求时,强制给出提示

                                    符合要求时,直接退出当前页面

          当用户在当前页面改动过数据,可以给出提示,提示 :数据尚未保存,确认离开?,未改动时,则没有此提示

  //用于标记是否离开本界面
  bolConfirm:boolean = true;

  //全局变量,为true表示符合条件
  //默认可以离开本界面
  bolPage:boolean = true;

  constructor(public navCtrl: NavController,
              public navParams: NavParams) {
 
     }

   //系统方法,即将离开当前页面时,触发此事件
  ionViewCanLeave() {

    if (this.bolPage) {    
      return true;
    } else if (this.bolConfirm) {    
      return true;
    } else {
      new Promise((resolve, reject) => {

        //创建弹框
        let alert = this.alertCtrl.create();  
 
        //设置弹框内容
        alert.setSubTitle('Are you sure to quit?');

        //增加按钮  no
        alert.addButton({
          text: 'no',
          role: 'cancle',   
          handler: () => {
            this.bolConfirm= false;
            resolve("false");
          }
        });

        //增加按钮  yes
        alert.addButton({
          text:'yes',
          handler: () => {
            this.bolConfirm = true;
            resolve("true");
          }
        });

        //弹出该弹框
        alert.present(alert);

      }).then((r) => {
        if (this.bolConfirm) {
          // 当点击确认后弹出当前视图,
          // 此时,在执行一遍 ionViewCanLeave 函数视图
          //才真正被弹出。
          this.navCtrl.pop();
        }
      });
    }

    // 由于AlertController是异步执行的,
    // 所以在得到异步执行结果前阻止视图离开
    return false;
  }

猜你喜欢

转载自blog.csdn.net/qq_41868796/article/details/82390242