离子后退按钮

Question

我有基本的 Ionic 应用程序，我禁用了应用程序上的后退按钮，后退按钮在 android 设备上仍然有效的原因是什么？

我目前正在测试离子视图。

这是我的代码：

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
  $ionicPlatform.registerBackButtonAction(function(e) {
  e.preventDefault();
  }, 101);
})

Answer 1

将优先级从 101 更改为 100 以覆盖默认的硬件备份功能。如果您的优先级为 100 已经覆盖了该功能，则可以使用优先级 101 覆盖该覆盖，如果这有意义的话。

$ionicPlatform.registerBackButtonAction(function(e) {
    // android hardware back button was hit
}, 100);

这是现有后退按钮挂钩的所有优先级列表

http://ionicframework.com/docs/api/service/$ionicPlatform/

Answer 2

根据离子 documentation

Your back button action will override each of the above actions whose priority is less than the priority you provide.

鉴于您希望在所有情况下都完全禁用后退按钮，并且引用列表中操作的最高优先级为 500，您应该提供大于 500 的优先级值，例如 600。放在 $ionicPlatform.ready()

中时，下面的代码应该可以工作

 $ionicPlatform.registerBackButtonAction(function(e) {}, 600);

Answer 3

对于任何试图在 Ionic 2 上进行排序的人：

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

这是实际的 post 信息：

在您的 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) 将 typings 文件夹添加到您的应用程序根目录：例如app/typings

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

的文件

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

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

4) 在tsconfig.json:

中添加pluginshackyhacky.d.ts编译

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

你可以看到我还包含了 phonegap.d.ts 文件，其中包含许多缺失的 properties/variables 允许 TypeScript 编译而不会出错。

希望这对遇到此问题的任何人有所帮助。

干杯。

Answer 4

这是 Ionic 2 的解决方案：

constructor(
    public platform: Platform, //Platform controller
    public app: App, //App controller
  ) {
    platform.ready().then(() => {
      StatusBar.styleDefault();
      Splashscreen.hide();

      //Registration of push in Android and Windows Phone
      platform.registerBackButtonAction(() => {
        let nav = this.app.getActiveNav();
        if (nav.canGoBack()){ //Can we go back?
          nav.pop();
        }else{
          this.platform.exitApp(); //Exit from app
        }
      });
    });
  }

离子后退按钮

Ionic Back Button

android

angularjs

ionic-framework

ionic

注：