使用 Ionic2/angular2 的设备（Android）后退按钮点击检测答案

【问题标题】：Device(Android) back button click detection using Ionic2/angular2使用 Ionic2/angular2 的设备（Android）后退按钮点击检测
【发布时间】：2016-11-21 17:46:29
【问题描述】：

我能够使用以下代码检测设备（Android）后退按钮单击事件。但点击返回按钮后，它会返回一级并打开确认对话框。

如何使用 ionic2 避免这种行为（转到上一个屏幕）？

registerBackButtonListener() {              
        document.addEventListener('backbutton', () => {           
            let backBtnCnfirm = this.alertCtrl.create({
              message: 'Do you want to close the App?',
              buttons: [
              {
               text: 'Yes',
               handler: () => {
               this.platform.exitApp();
              }
            },
            {
             text: 'No',
             handler: () => {
            }
          }
        ]
       });
        backBtnCnfirm.present();
        }, false);
    }

【问题讨论】：

你什么时候打电话给registerBackButtonListener()？
我在 platform.ready() 函数内部调用
在一个名为 ionViewWillLeave() 的方法中显示您的警报，这将在您的页面出现之前执行 popped 让我把它变成一个答案

标签： angular ionic2

【解决方案1】：

返回按钮会调用navCtrl.pop()，所以返回上一页。 Ionic 提供生命周期事件，例如 viewDidEnter、viewWillEnter、viewWillLeave 等。

当你在你的代码中创建这个函数时：

ionViewWillLeave(){
   this.alertCtrl.create({
     message: 'Do you want to close the App?',
              buttons: [
              {
                text: 'Yes',
                handler: () => {
                  this.platform.exitApp();
               }
             },
             {
              text: 'No',
              role: 'cancel'
            }
           ]
   }).present();
}

Ionic 将在 navCtrl.pop() 执行之前执行此操作。

注意：这将在页面离开时执行每次（因此在手动推送或弹出时），但我认为您足够聪明，可以找到解决方法（布尔检查 f.e.）

（我不知道您的要求，但我发现在按下后退按钮时显示这样的消息是不好的用户体验，通常人们会想要返回一页）

【讨论】：