Ionic2 下處理 Android 設備下返回按鈕的事件

原文發表於我的技術博客

本文分享了 Ionic2 下處理 Android 設備下返回按鈕的事件，供參考。
原文發表於我的技術博客

代碼中我分享了如何捕捉 Ionic2 項目在 Android 設備下返回按鈕事件，並在捕捉到的事件中可以靈活根據需求編寫相關業務邏輯，如退出、返回等。
詳細的邏輯處理參見下面代碼即可。

{% codeblock lang:js%}
import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {App, NavController} from 'ionic-angular';
import {ViewChild} from '@angular/core';

@Component({
template: '<ion-nav #rootNavController [root]="rootPage" #content swipe-back-enabled="false">'
})

export class MyApp {
@ViewChild('rootNavController') nav: NavController;
private rootPage: any;

constructor(private platform: Platform) {
this.rootPage = TabsPage;

platform.ready().then(() => {
  // Okay, so the platform is ready and our plugins are available.
  // Here you can do any higher level native things you might need.
  StatusBar.styleDefault();
  //退出按鈕重寫******開始******
  document.addEventListener('backbutton', () => {
    let activeVC = this.nav.getActive();
    let page = activeVC.instance;

    if (!(page instanceof TabsPage)) {
      if (!this.nav.canGoBack()) {
        console.log('檢測到在根視圖點擊了返回按鈕。');
        return platform.exitApp();
      }
      console.log('檢測到在子路徑中點擊了返回按鈕。');
      return this.nav.pop();
    }

    let tabs = page.tabs;
    let activeNav = tabs.getSelected();

    if (!activeNav.canGoBack()) {
      console.log('檢測到在 tab 頁面的頂層點擊了返回按鈕。');
      return platform.exitApp();
    }

    console.log('檢測到當前 tab 彈出層的情況下點擊了返回按鈕。');
    return activeNav.pop();

  }, false);

  //退出按鈕重寫******結束******
});

}
}
ionicBootstrap(MyApp);

{% endcodeblock %}