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

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

我希望能够知道要做什么，具体取决于向用户显示的页面。

我没有找到一个很好的答案，但是过了一会儿，我自己想出了解决方法。我要和大家分享。

谢谢

最佳答案

这是我的做法：

在每个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是否在当前页面中存在，并调用它，如果不存在，则转到主/第一个选项卡。

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

我这样做是因为我需要检查该特定页面上的模式是否已打开。

码：

  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方法中所定义）。

关于ionic2 - 如何处理Ionic 2上的后退按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41373774/