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

Question

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

我希望能够根据向用户显示的页面来知道该怎么做。

我没有找到这个问题的好答案，但过了一段时间我自己想出了一种方法来做到这一点。我来分享给大家。

谢谢

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

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

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

代码:

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