离子框架 $state.go('app.home');在我想去的页面上添加后退按钮（如何删除它）？

Posted 2023-02-19

【中文标题】离子框架 $state.go(\'app.home\');在我想去的页面上添加后退按钮（如何删除它）？

【英文标题】：Ionic framework $state.go('app.home'); is adding back button on page where I want to go (how to remove it)?离子框架 $state.go('app.home');在我想去的页面上添加后退按钮（如何删除它）？

【发布时间】：2015-03-11 21:56:28

【问题描述】：

我有带有侧边栏菜单的应用程序。我在第二页，我正在调用控制器函数，它使用以下命令将我重定向到第一页：

$state.go('app.home');

问题是这个页面现在显示返回按钮旁边的侧边栏菜单图标，见下图：

谁能告诉我如何拒绝在分配了侧边栏菜单的页面中添加返回按钮？

感谢您的帮助。

app.js 与路由器配置如下：

angular.module('Test', ['ionic', 'config', 'Test', 'LocalStorageModule'])

.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();
    
  );
)

.config(function($stateProvider, $urlRouterProvider, localStorageServiceProvider) 
   localStorageServiceProvider
     .setPrefix('max_relax');
   $stateProvider

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

    .state('app.home', 
      url: '/home',
      views: 
        'menuContent' :
          templateUrl: 'templates/home.html',
          controller: 'HomeCtrl'
        
      
    )

    .state('app.saved', 
      url: '/saved',
      views: 
        'menuContent' :
          templateUrl: 'templates/saved.html',
          controller: 'SavedCtrl'
        
      
    )
    .state('app.settings', 
      url: '/settings',
      views: 
        'menuContent' :
          templateUrl: 'templates/settings.html',
          controller: 'SettingsCtrl'
        
      
    );
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/home');
);

编辑：

添加菜单模板：

<ion-side-menus>

  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
      <h1 class="title">Menu</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close href="#/app/home">
          Home
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/saved">
          Saved
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/settings">
          Settings
        </ion-item>

      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

【问题讨论】：

能否提供'app.home'页面链接的HTML代码？

没有链接，重定向是使用go方法完成的。我刚刚添加了菜单模板。

【参考方案1】：

在您的控制器中使用$ionicHistory，然后再调用$state.go('app.home')。

.controller('HomeCtrl', function($scope,...,$ionicHistory) 
  ...
  $ionicHistory.nextViewOptions(
    disableBack: true
  );

  $state.go('app.home');
);

【讨论】：

$ionicViewService 现在已弃用，我们必须改用 $ionicHistory。其他一切都保持不变。

在使用 $state.go 时，我们可以只重置状态历史，因此框架不会添加返回按钮。这是从登录视图转到主视图时的理想选择： $ionicHistory.nextViewOptions( historyRoot: true ) $state.go("app.home");

【参考方案2】：

我在使用 Ionic 的侧边菜单时也遇到了这个问题。

在某些情况下，当从侧边菜单中选择一个选项时，生成的页面/视图会在导航栏中显示一个后退按钮，这是不应该的（因为选择菜单选项应该重置历史记录）。

问题与在菜单选项中使用“ng-click”有关，例如：

<ion-item menu-close ng-click="showStartPage()" ...>

'showStartPage' 是一个调用 $state.go(...) 的控制器方法。

解决方案是这样编码：

<ion-item menu-close href="#/startPage" ...>

这样完成后，Ionic （显然）能够正确跟踪导航历史记录。

（我没有尝试过，但可能“ui-sref”而不是“href”也可以）

【参考方案3】：

$ionicNavBarDelegate.showBackButton(false);

【参考方案4】：

在您要返回的控制器HomeCtrl:

.controller('SavedCtrl', function($scope,...,$ionicHistory) 
  ...
    $ionicHistory.nextViewOptions(
       disableBack: true
    );

  $state.go('app.home');
 )
.controller('HomeCtrl', function($scope,...,$ionicHistory) 
     $ionicHistory.clearHistory();
 )

【参考方案5】：

只要您在<ion-nav-bar> 中包含<ion-nav-back-button></ion-nav-back-button>，默认情况下，您将在使用app 的任何视图上看到一个后退按钮。

删除<ion-nav-back-button> 将从所有使用app 的视图中删除后退按钮。您可以通过在该模板的<ion-view> 上设置hide-back-button="true" 来选择性地禁用它。

因此，在您的情况下，从 menu.html 中删除 <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button> 将隐藏所有使用 app 的视图上的后退按钮。

【参考方案6】：

您可以在 $state.go('Yourstate') 之前设置 nextViewOptions。喜欢 在你的控制器中，你可以写，

$ionicHistory.nextViewOptions(
  disableBack: true
);
$state.go('app.home');

因此对于该转换，它将清除历史堆栈并将下一个视图设置为历史堆栈的根。