ionic3 + angular4 在 android手機上物理鍵返回問題

問題描述：
　　最接近公司為某行開發的項目遇到了這么一個問題：某行從自己開發的應用跳轉到我們開發的應用之后，經過一系列操作之后不管當前頁面處於哪一個頁面，點擊android手機物理鍵返回的時候都會直接返回到我們應用的第一個頁面。

問題分析：
　　咨詢某行本部開發人員之后了解到，從他們的應用跳轉到我們的應用是通過鏈接地址的形式。也就是說我們的應用相當於在瀏覽器上運行的，而不是我們平時開發那樣打包安裝到手機上運行的。由此想到 angular4 開發的其實是一個單頁應用，因此返回就不會按路由隊列順序依次返回。

問題解決：
　　想辦法添加window.history記錄，並在頁面回到首頁的時候使 頁面 history 回到應用剛打開時的 history 隊列位置；history返回的時候要當前頁面路由隊列也要返回。結合 history Api 、 NavController 、 ionci3 生命周期得出解決方案如下：

　　1、定義超類 BasePage，並在構造函數中通過TS代碼添加history記錄；
　　2、所有的Page頁面都繼承超類BasePage；
　　3、首頁添加首頁標識 ifIndex:boolean = false, 並在 ionViewDidEnter 生命周期 中設置為true；
　　4、首頁 構造函數中綁定window.onpopstate()事件，判斷當當前路由隊列可以返回的時候當前路由執行pop方法，當當前頁面是首頁並且event.state !== null 的時候window.history.back()；

BasePage:

import {NavController, NavParams} from 'ionic-angular';

export class BasePage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    // 添加瀏覽器訪問記錄
    window.history.pushState(this.constructor.name, '', '');
  }
}

HomePage:

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {BasePage} from "../BasePage";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage extends BasePage{

  /**
   * 變量，判斷當前頁面是否是首頁
   * @type {boolean}
   */
  ifIndex: boolean = false;

  constructor(public navCtrl: NavController){
    super(navCtrl,null); // 初始化父類
    let that = this;
    // window綁定onpopstate事件，用於處理瀏覽器返回事件
    window.onpopstate = function(event){
      // 如果當前路由存在前一個頁面  返回前一個頁面
      if(that.navCtrl.canGoBack()){
        that.navCtrl.pop();
      }
      // 如果當前頁面是第一個頁面，並且event.state !== null 返回前一個頁面
      if(that.ifIndex === true && event.state !== null){
        window.history.back();
      }
    }
  }

  ionViewDidEnter(){
    // 頁面激活后更新 enableAutoBack 為true，
    this.ifIndex = true;
    // 因為超類中添加了一條history記錄 此處返回前一頁來觸發window.onpopstate事件
    window.history.back();
  }

  ionViewWillLeave(){
    // 從當前頁面離開 enableAutoBack 為 false
    this.ifIndex = false;
  }
}