如何处理Ionic 2上的后退按钮

Question

如何处理Ionic 2上的后退按钮动作？

我希望能够知道该做什么,具体取决于向用户显示的页面.

我没有找到这个问题的好答案,但过了一段时间我发现自己有办法做到这一点.我要和大家分享一下.

谢谢

Answer 1

我是这样做的:

在每个Page组件中,我创建了一个名为的函数backButtonAction(),它将为每个页面执行自定义代码.

码:

import { Component } from '@angular/core';
import { Platform, NavController, ModalController } from 'ionic-angular';
import { DetailsModal } from './details';

@Component({
    selector: 'page-appointments',
    templateUrl: 'appointments.html'
})
export class AppointmentsPage {
    modal: any;

    constructor(private modalCtrl: ModalController, public navCtrl: NavController, public platform: Platform) {
        // initialize your page here
    }

    backButtonAction(){
        /* checks if modal is open */
        if(this.modal && this.modal.index === 0) {
            /* closes modal */
            this.modal.dismiss();
        } else {
            /* exits the app, since this is the main/first tab */
            this.platform.exitApp();
            // this.navCtrl.setRoot(AnotherPage);  <-- if you wanted to go to another page
        }
    }

    openDetails(appointment){
        this.modal = this.modalCtrl.create(DetailsModal, {appointment: appointment});
        this.modal.present();
    }
}

在中app.component.ts,我使用该platform.registerBackButtonAction方法注册一个回调,每次单击后退按钮时都会调用该回调.在里面我检查backButtonAction当前页面中是否存在该函数并调用它,如果它不存在,只需转到main/first选项卡.

如果他们不需要为每个页面执行自定义操作,则可以简化此操作.你可以弹出或退出应用程序.

我这样做是因为我需要检查模态是否在此特定页面上打开.

码:

  platform.registerBackButtonAction(() => {
    let nav = app.getActiveNav();
    let activeView: ViewController = nav.getActive();

    if(activeView != null){
      if(nav.canGoBack()) {
        nav.pop();
      }else if (typeof activeView.instance.backButtonAction === 'function')
        activeView.instance.backButtonAction();
      else nav.parent.select(0); // goes to the first tab
    }
  });

如果当前页面是第一个选项卡,则应用程序将关闭(如backButtonAction方法中所定义).

Answer 2

Ionic最新版本3.xx app.component.ts文件 import { Platform, Nav, Config, ToastController} from 'ionic-angular';

constructor(public toastCtrl: ToastController,public platform: Platform) {
platform.ready().then(() => { 
      //back button handle
      //Registration of push in Android and Windows Phone
      var lastTimeBackPress=0;
      var timePeriodToExit=2000;

  platform.registerBackButtonAction(() => {
     // get current active page
      let view = this.nav.getActive();
    if(view.component.name=="TabsPage"){
                    //Double check to exit app                  
                    if(new Date().getTime() - lastTimeBackPress < timePeriodToExit){
                         this.platform.exitApp(); //Exit from app
                    }else{
                         let toast = this.toastCtrl.create({
                            message: 'Press back again to exit App?',
                            duration: 3000,
                            position: 'bottom'
                          });
                            toast.present();     
                            lastTimeBackPress=new Date().getTime();
                    }
    }else{
         // go to previous page
              this.nav.pop({});
    }
  });

});

}

Answer 3

我使用了来自这里和其他来源的答案来完成我所需要的.我注意到当你构建生产应用程序(--prod)时,这种方法不起作用,因为JS丑化和简化:

this.nav.getActive().name == 'PageOne'

因此,我在"if"语句中使用next:

view.instance instanceof PageOne

所以最终的代码如下所示:

this.platform.ready().then(() => {

  //Back button handling
  var lastTimeBackPress = 0;
  var timePeriodToExit = 2000;
  this.platform.registerBackButtonAction(() => {
    // get current active page
    let view = this.nav.getActive();
    if (view.instance instanceof PageOne) {
      if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
          this.platform.exitApp(); //Exit from app
      } else {
        let toast = this.toastCtrl.create({
          message: 'Tap Back again to close the application.',
          duration: 2000,
          position: 'bottom',
        });
        toast.present();     
        lastTimeBackPress = new Date().getTime();
      } 
    } else if (view.instance instanceof PageTwo || view.instance instanceof PageThree) {
      this.openPage(this.pages[0]);
    } else {
      this.nav.pop({}); // go to previous page
    }
  });
});