Ionic - 如何仅在登录页面上删除sidemenu？

Question

我只需要在登录页面上删除sidemenu.否则留下来.怎么做？我正在使用command ionic ionic start myApp sidemenu来创建项目.

app.js

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('login', {
      url: "/login",
      templateUrl: "templates/login.html",
      controller: 'LoginCtrl'
    })

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

    .state('app.search', {
      url: "/search",
      views: {
        'menuContent' :{
          templateUrl: "templates/search.html"
        }
      }
    })

登录页面

<ion-view title="Login">
  <ion-content>
      <div class="list">
        <label class="item">
          <button class="button button-block button-positive" type="submit" ng-click="login()">Log in</button>
        </label>
      </div>

  </ion-content>
</div>

Answer 1

您可以通过调用随时在任何页面禁用/启用侧面菜单

$ionicSideMenuDelegate.canDragContent(false)

例如:

angular.module('ABC').controller('xyzCtrl', function($scope, $ionicSideMenuDelegate) {

    $ionicSideMenuDelegate.canDragContent(false)

});

Answer 2

同样的问题在这里 只需在离子视图中添加hide-nav-bar ="true"即可

<ion-view hide-nav-bar="true">

希望能帮助到你!

Answer 3

离子2

**Ionic 2**


    import { MenuController } from 'ionic-angular';

    export class LoginPage {

       constructor(public menuCtrl: MenuController) {

       }

       ionViewWillEnter() {

           this.menuCtrl.swipeEnable( false )
       }

       ionViewDidLeave() {

           this.menuCtrl.swipeEnable( true )
       }
    }



IONIC 4: Sept2019
try this code to in your login.page.ts
Step1: import {  MenuController } from '@ionic/angular';
Step2: constructor(public menuCtrl: MenuController) { }
(below constructo)
Step3: ionViewWillEnter() {
          this.menuCtrl.enable(false);
       }
       ionViewDidLeave() {
          this.menuCtrl.enable(true);
       } 

this code will help you to work with side menu flawlessly on any screen, if you login & re-login and try it will work now. 

Answer 4

您可以做的是定义没有侧边菜单的登录页面.检查登录页面HTML模板.确保您没有<ion-side-menus>和中的<ion-side-menu>元素.这些用于需要侧面菜单的页面.

您的登录页面应如下所示:

<ion-view>
  <ion-content>
     <!--your page content goes in here-->
   </ion-content>
</ion-view>

要在其他页面上使用sidemenu,只需将sidemenu内容置于父代状态,在您的代码中为app状态.

您的menu.html文件:

<ion-view>
  <ion-side-menus>
    <ion-side-menu>
      <!--put your side menu content here-->
      <!--any child state of app will inherit this sidemenu-->
    </ion-side-menu>

   <ion-side-menu-content>
      <ion-nav-view name="menuContent"></ion-nav-view>
   </ion-side-menu-content>
  </ion-side-menus>
</ion-view>

Answer 5

有点晚了比赛,但是这是为那些(像我)谁需要保持内的登录另外一个选择side-menu布局,但需要隐藏侧边菜单按钮,同时保持窗口标题.

在login.html视图内部使用该ion-header-bar指令创建一个带标题的新标题,然后通过标记隐藏ion-nav-bar在side-menu布局中ion-view.

示例(login.html)

<ion-header-bar class="bar-positive" align-title="center">
    <h1 class="title">Login</h1>
</ion-header-bar>

<ion-view hide-nav-bar="true">
 <!-- Login content goes here -->
</ion-view>

然后,如果您需要禁用任何拖动手势,请在控制器中执行此操作,如@waqas建议的那样.

Answer 6

我已经为这个问题做了一个小型演示.

Plunker演示

如果你想要一个页面不同于sidemenu.Create一个新的Parent state.例如

$stateProvider
    .state('landing', {
        url: '/landing',
        controller: 'landingCtrl',
        templateUrl: 'landing.html'
    });

Html:

<ion-view class="view-bg-blue" >
    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
    </ion-nav-buttons>
    <ion-content padding="true">
        <h3 class="text-center">Welcome To Landing Page</h3>
        <div class="row">
            <div class="col">
                <div class="text-center">
                    <h4>My App</h4>
                    <div class="row">
                        <div class="col">
                            <input placeholder="User">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <input placeholder="password">
                        </div>
                    </div>
                    <a class="button icon-right ion-chevron-right button-calm" ng-click="open()">Login</a>
                </div>
            </div>
        </div>
    </ion-content>
</ion-view>

然后使用/landing你想要的时候调用这个状态.