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

后退按钮的默认行为如下：回到历史 - 如果历史堆栈是空的 - ＆gt;退出应用程序。

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

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

$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"来进行试验。这仍将关闭边栏但保留历史。

我最终覆盖了硬件后退键的行为，如下所示。在退回时，它会在退出应用程序之前将用户发送到起始视图。请注意，我仍然使用侧边菜单中的menu-close属性。另请注意，我碰巧将起始网址存储在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);

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

5 个答案: