离子导航后退按钮和菜单按钮一起显示

Question

我尝试使菜单按钮在显示后退按钮时不显示。 有没有办法让Ionic来处理这个问题？ 还是由我决定？

例如，如果我使用 UI-sref 从 app.users 转到 app.users.add 或 app.users.details，我希望隐藏菜单按钮并显示后退按钮，但是当我转到嵌套视图时，它们都会显示。 示例：

<button class="button button-positive" ui-sref="app.users.details({id:user.id})"> User details </button>

应用.js

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html'
    //controller: 'AppCtrl'
  })
  .state('app.users', {
    url: '/users',
    views: {
      'menuContent@app' : {
        controller: 'UsersCtrl',
        templateUrl: 'templates/users.html'
      }
    }
  })
  .state('app.users.add', {
    url: '/addUsers',
    views: {
      'menuContent@app' : {
        controller: 'AddUserCtrl',
        templateUrl: 'templates/add_user.html'
      }
    }
  })
  .state('app.users.details', {
    url: '/userDetails/:id',
    views: {
      'menuContent@app' : {
        controller: 'UserDetailsCtrl',
        templateUrl: 'templates/details_user.html'
      }
    }
  })
}

菜单.html

<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-forward"></i> back
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-right-left"></ion-nav-view>
  </ion-pane>
  <ion-side-menu side="right">
    <header class="bar bar-header bar-stable">
      <h1 class="title">Title</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close ui-sref="app.users">
          Users
        </ion-item>
        <ion-item nav-clear menu-close ui-sref="app.users.add">
          New user
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

我的观点结构是这样的：

<ion-view title="Title">
  <ion-nav-buttons side="right">
    <button menu-toggle="right"class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    ...
      View Content
    ...
  </ion-content>
</ion-view>

Answer 1

这是

在 beta 14 中默认由 ionic 完成的。您也可以通过此属性切换它。

<ion-side-menus enable-menu-with-back-views="false">

相对代码笔侧边菜单初学者项目侧边菜单文档

Answer 2

也可以从子页面覆盖它，只需在子模板中添加离子侧菜单指令：

<ion-side-menus enable-menu-with-back-views="true"></ion-side-menus>
<ion-view view-title="My Child page">
    <ion-content>
        <h1>HEY</h1>
    </ion-content>
</ion-view>

这将在添加到菜单.html模板的子页面中添加完整的导航栏（离子导航栏）

Answer 3

将带有菜单按钮的导航栏放在需要菜单按钮的 html 页面上，并将带有后退按钮的导航栏放在需要后退按钮的页面上。

像这样，我需要主页上的菜单，因此请使用菜单按钮将导航栏放在主页上

<ion-view title="home">
  <ion-nav-bar class="bar-stable main-header-nav home-page">
    <ion-nav-buttons side="left">
      <button class="button button-icon button-clear ion-navicon" menu- toggle="left"></button>
    </ion-nav-buttons>
  </ion-nav-bar>
  <ion-content></ion-content>
</ion-view>

我需要收件箱页面上的后

退按钮，因此请在收件箱页面上使用带有后退按钮的导航栏

 <ion-view title="">
  <ion-nav-bar class="bar-stable main-header-nav home-page">
    <ion-nav-back-button class="button-clear go-back">
      </ion-nav-back-button>
  </ion-nav-bar>
  <ion-content></ion-content>
</ion-view>

Answer 4

我在 2019 年解决了将属性"menuToggle"添加到按钮的问题。这告诉Ionic/Angular该按钮的功能是"汉堡按钮"，因此，当显示"后退箭头按钮"时，Angular理解并隐藏它。

<button menuToggle ion-button icon-only (click)="btnHamburger()">
   <ion-icon name="menu"></ion-icon>
</button>