如何在ionic中收听Android硬件后退按钮答案

【问题标题】：How to listen Android hardware back button in ionic如何在ionic中收听Android硬件后退按钮
【发布时间】：2015-12-10 02:44:10
【问题描述】：

我尝试听android硬件后退按钮，但没有效果。

主要代码：

.run(['$ionicPlatform','$ionicHistory',function($ionicPlatform,$ionicHistory) {
     $ionicPlatform.ready(function() {
                          if(window.cordova && window.cordova.plugins.Keyboard) {
                          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                          }
                          if(window.StatusBar) {
                          StatusBar.styleDefault();
                          }
                          });
     $ionicPlatform.registerBackButtonAction(function (e) {
         e.preventDefault();
         $ionicHistory.nextViewOptions({
             disableAnimate: true
        });
        $ionicHistory.viewHistory().backView.go();
         return false;
       }, 100);
     }])

我的运行环境是手机浏览器。Android版本4.4.2

【问题讨论】：

标签： android angularjs ionic

【解决方案1】：

更新：我不再使用它，因为它不可靠。此外，在最新的 Ionic 版本中，app.ts 现在是 app.component.ts。

对于 Ionic 2，请查看我的博客文章以了解如何解决此问题。也应该适用于 Ionic 1，因为它只调用一个 cordova 监听器：

http://www.codingandclimbing.co.uk/blog/ionic-2-android-back-button-13

这是实际的帖子信息：

在您的 app.ts 中，执行以下操作以使后退按钮按预期工作（大多数情况下！）：

  initializeApp() {
    this.platform.ready().then(() => {
      this.registerBackButtonListener();
    });
  }

  registerBackButtonListener() {
    document.addEventListener('backbutton', () => {
      var nav = this.getNav();
      if (nav.canGoBack()) {
        nav.pop();
      }
      else {
        this.confirmExitApp(nav);
      }
    });
  }


confirmExitApp(nav) {
    let confirm = Alert.create({
      title: 'Confirm Exit',
      message: 'Really exit app?',
      buttons: [
        {
          text: 'Cancel',
          handler: () => {
            console.log('Disagree clicked');
          }
        },
        {
          text: 'Exit',
          handler: () => {
            navigator.app.exitApp();
          }
        }
      ]
    });
    nav.present(confirm);
  }

  getNav() {
    return this.app.getComponent('nav');
  }

注意：

如果您收到有关应用不是 navigator 属性的错误：

1) 将类型文件夹添加到您的应用根目录：例如应用/打字

2) 添加一个名为：pluginshackyhacky.d.ts

的文件

3) 添加需要为 TypeScript 编译扩展的属性。：

interface /*PhoneGapNavigator extends*/ Navigator {
    app: any;
}

4) 将 pluginshackyhacky.d.ts 添加到 tsconfig.json 中的编译中：

  "files": [
    "app/app.ts",
    "app/typings/pluginshackyhacky.d.ts",
    "app/typings/phonegap.d.ts"
  ]

您可以看到我还包含了 phonegap.d.ts 文件，其中包含许多缺失的属性/变量，这些属性/变量允许 TypeScript 编译而不会出错。

希望这可以帮助遇到此问题的任何人。

干杯。

【讨论】：

你能帮我解决这个问题吗.. 没有 app.ts 文件。是否可以在 app.component.ts 文件上注册此事件。你能把这个更新得更清楚一点吗
如果你看到我博客上的评论，我很久以前就停止使用它了，因为它不可靠。在框架结束 RC 阶段之前，我不建议再次尝试。
this.platform.registerBackButtonAction(()=>{this.closeModal()}); 好的，我正在尝试这样。我想它可能会工作ionicframework.com/docs/v2/api/platform/Platform。谢谢你的回复。我在每个组件构造函数上都添加了这个我会试试这个

【解决方案2】：

也许这对你有帮助。

 $state.$current.name == "";var backbutton=0;
 $ionicPlatform.registerBackButtonAction(function (event) {

    if (($state.$current.name == "app.intro") ||
        ($state.$current.name == "app.main.home") ||
        ($state.$current.name == "app.account")) {
        if(backbutton==0){
            backbutton++;
            window.plugins.toast.showLongBottom('Press again to exit');
            $timeout(function(){backbutton=0;},3000);
        }else{
            navigator.app.exitApp();
             }
        console.log("one");
    }else if($state.$current.name == "app.welcome.takeControl") {
        console.log("two");
            $state.go("app.main.home");
    }else{
        console.log("three");
            navigator.app.backHistory();
          }
}, 100);

【讨论】：