单击设备返回按钮将关闭应用程序，而不是返回上一页

Question

如果点击任何ion-item，它会打开所需的页面，但如果我点击设备后退按钮，它会关闭应用程序而不是返回到 android 中的上一页：

这是我的离子侧边菜单：

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button></ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon icon ion-android-menu" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-positive">
      <h1 class="title"></h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close ng-click="login()">
          Login
        </ion-item>
        <ion-item menu-close ui-sref="app.search">
          Search
        </ion-item>
        <ion-item menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item menu-close href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

这里是app.js：

    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

  .state('app.search', {
    url: '/search',
    views: {
      'menuContent': {
        templateUrl: 'templates/search/default.html'
      }
    }
  })
  .state('app.search-form', {
    url: '/search-form',
    views: {
      'menuContent': {
        templateUrl: 'templates/search/search-form.html'
      }
    }
  })

我找到的一个解决方案：

$ionicHistory.nextViewOptions({        
  disableBack: true,
  historyRoot: true
});      

因此，当您单击一个按钮并转到下一页时，这将禁用返回按钮。

Answer 1

返回按钮的默认行为如下： 返回历史 - 如果历史堆栈为空 -> 退出应用程序。

因此，当您点击硬件后退按钮时，您应该检查您所处的 $state。

使用以下代码（放置在模块的运行函数中），您可以覆盖默认行为。例如，您可以像这样禁用应用退出：

$ionicPlatform.registerBackButtonAction(function (event) {
  if($state.current.name=="app.home"){
    navigator.app.exitApp(); //<-- remove this line to disable the exit
  }
  else {
    navigator.app.backHistory();
  }
}, 100);

请参阅$ionicPlatform 的文档。

Answer 2

清除历史记录的是侧面菜单中的menu-close 属性。您可以通过将其替换为 menu-toggle="left" 来进行实验。这仍然会关闭侧栏，但会保留历史记录。

我最终覆盖了 HW 返回键的行为，如下所示。 当按下返回时，它会在退出应用程序之前将用户发送到起始视图。请注意，我仍然在侧边菜单中使用menu-close 属性。另请注意，我碰巧将启动 url 存储在 window.localStorage["start_view"] 中，因为它可以在我的应用程序中更改。希望它可以帮助/启发其他人解决这个问题。

$ionicPlatform.registerBackButtonAction(function(event) {
    if ($ionicHistory.backView() == null && $ionicHistory.currentView().url != window.localStorage["start_view"]) {
      // Goto start view
      console.log("-> Going to start view instead of exiting");
      $ionicHistory.currentView($ionicHistory.backView()); // to clean history.
      $rootScope.$apply(function() {
        $location.path(window.localStorage["start_view"]);
      });
    } else if ($ionicHistory.backView() == null && $ionicHistory.currentView().url == window.localStorage["start_view"]) {
      console.log("-> Exiting app");
      navigator.app.exitApp();
    } else {
      // Normal back
      console.log("-> Going back");
      $ionicHistory.goBack();
    }
  }, 100);

Answer 3

在您的 app.component.ts 中导入 NavController 并使用以下代码。

import { NavController} from '@ionic/angular';

constructor( private nav: NavController ) {this.initializeApp();}

ngOnInit() {
    this.plateform.backButton.subscribe(res => {
      this.nav.goBack('');
    });
  }

Answer 4

一个解决方案可能是：

$ionicHistory.nextViewOptions({        
  disableBack: true,
  historyRoot: true
});      

Answer 5

这可以防止事件传播，否则它不起作用。

代码作者：https://stackoverflow.com/users/5378702/andre-kreienbring

$ionicPlatform.registerBackButtonAction(function (event) {
  if(condition){
    navigator.app.exitApp(); //<-- remove this line to disable the exit
  }
  else {
    navigator.app.backHistory();
  }
  throw "PreventBackButton";
}, 100);