web-dev-qa-db-ja.com

Ionic nav-戻るボタンとメニューボタンが一緒に表示されます

戻るボタンが表示されているときにメニューボタンが表示されないようにします。 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>

app.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'
      }
    }
  })
}

menu.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>
menunavigationionic-frameworkback-buttonionic
10
1O1

これはionicデフォルトでベータ14になりました。これは、この属性で切り替えることもできます。

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

相対コードペンサイドメニュースタータープロジェクトサイドメニュードキュメント

16
mhartington

子テンプレート内にion-side-menusディレクティブを追加するだけで、子ページからそれをオーバーライドすることもできます。

<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>

これにより、menu.htmlテンプレートに追加された完全なナビゲーションバー（ion-nav-bar）が子ページ内に追加されます（上記の例による）

4
allucardster

メニューボタンが必要な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>
1
Tek Raj Pant

私は2019年にプロパティ"menuToggle"をボタンに追加することを解決しました。これは、そのボタンの機能が「ハンバーガーボタン」であることをIonic/Angularに伝えます。したがって、Angular「戻る矢印ボタン」が表示されたら、それを理解して非表示にします。

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