Question

当从一个页面导航到另一个页面时，Ionic会自动在导航栏上显示后退按钮。但是，某些情况下离子不显示后退按钮。例如，当您从标签页导航到无标签页时。

如何强制Ionic在某个页面上显示后退按钮？

使用Javascript：

.state('app.tab.playlists', { //<!-- Tab content page
  url: '/playlists',
  views: {
    'tab-Content': {
      templateUrl: 'templates/playlists.html',
      controller: 'PlaylistsCtrl'
    }
  }
})

.state('app.singer', { //<!-- Not tab content page (if you navigate from tab page to this page, back button will not displayed)
  url: '/singer',
  views: {
    'menuContent': {
      templateUrl: 'templates/singer.html'
    }
  }
})

Answer 1

您可以在控制器中告诉它。尝试：

 .controller('yourCtrl', function($scope) {

$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
  viewData.enableBack = true;
}); 

})

但是像LeftyX说的那样。选项卡到非选项卡视图的历史记录功能是错误的。

Answer 2

Ionic在您从一个视图导航到另一个视图时管理history。

$ ionicHistory会在用户浏览时跟踪视图   应用程序。与浏览器的行为方式类似，Ionic应用程序也可以   跟踪上一个视图，当前视图和前进   查看（如果有）。但是，典型的Web浏览器只保留   以线性方式跟踪一个历史堆栈。

与传统的浏览器环境不同，应用程序和Web应用程序都有   并行独立历史，例如标签。应该是用户   在一个选项卡上深入导航几页，然后切换到新选项卡   返回，后退按钮不是与前一个选项卡相关，而是与之相关   在该标签中访问过的前几页。

在github上有一个错误，但尚未修复（并且只会在2.0中修复）亚当布拉德利声明：

后退按钮不会显示，因为当您进入选项卡时，它会显示输入它自己的＆＃34;历史＆＃34;，意味着每个标签都有自己的导航返回并且前进。

所以，基本上，当你从标签转到常规视图时，你将失去后退按钮。

你能做的就是自己创造一个：

<ion-nav-buttons side="left">
    <button class="button back-button buttons button-clear header-item" ng-click="goBack()">
        <i class="icon ion-ios-arrow-back"> Back</i> 
    </button>
</ion-nav-buttons>

并将其放在您的视图中：

<ion-view view-title="home">

  <ion-nav-buttons side="left">
    <button class="button back-button buttons button-clear header-item" ng-click="goBack()">
      <i class="icon ion-ios-arrow-back"> Back</i> 
    </button>
  </ion-nav-buttons>

    <ion-content padding='true' scroll='false' has-footer='false'>

        <div class="card">
            <div class="item item-text-wrap">
                HOME PAGE
            </div>
        </div>

    </ion-content>

</ion-view>

正如您所看到的，我已使用ng-click="goBack()"作为按钮。

在您的控制器中，您只需：

$scope.goBack = function(){
    $ionicHistory.goBack();
}

不要忘记在控制器中注入$ionicHistory。

PS：这是一个过于简化的解决方案，因为它不会检查历史记录是否有后视图：

$ionicHistory.viewHistory().backView

Answer 3

在

中添加以下行

<ion-navbar hideBackButton="true">
    <button (click)="back()" class="back-button disable-hover bar-button bar-button-ios back-button-ios bar-button-default bar-button-default-ios show-back-button" ion-button="bar-button" ng-reflect-klass="back-button" ng-reflect-ng-class="back-button-ios" style=""><span class="button-inner"><ion-icon class="back-button-icon icon icon-ios back-button-icon-ios ion-ios-arrow-back" role="img" ng-reflect-klass="back-button-icon" ng-reflect-ng-class="back-button-icon-ios" aria-label="arrow back" ng-reflect-name="ios-arrow-back"></ion-icon><span class="back-button-text back-button-text-ios" ng-reflect-klass="back-button-text" ng-reflect-ng-class="back-button-text-ios">Back</span></span><div class="button-effect"></div></button>

如何在某些页面上强制离子显示后退按钮？

3 个答案: