在 Ionic 2 中禁用侧边菜单的滑动以打开登录页面(或任何页面)的手势 [英] Disable the side menu's swipe to open gesture for Login page (or any page) in Ionic 2

问题描述

我是 Ionic 2 的新手 &Angular2 和我使用以下命令下载了一个新的 Ionic 模板

I'm new to Ionic 2 & Angular2 and I have downloaded a new Ionic template with the following command

 Ionic start appname sidemenu --v2 --ts

对于这个特定的解决方案，我添加了一个登录页面来验证用户.验证成功后，用户将被导航到使用侧边菜单的菜单页面.

For this particular solution I have added a login page to validate a user. Once the validation succeeds the user will be navigated to the menu page which uses the side menu.

由于该解决方案基于 sidemenu 模板，因此只要用户向左滑动，侧面菜单就会显示在登录页面上.

As the solution is based on the sidemenu template, the side menu is showing on the login page whenever the user swipes left.

所以有人可以指导我纠正这个错误并在滑动视图时停止显示侧边菜单.

So can somebody please guide me to rectify this mistake and stop the side menu from showing when the view is swiped.

我的代码

app.ts 文件

import {App, IonicApp, Platform,MenuController} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HelloIonicPage} from './pages/hello-ionic/hello-ionic';
import {ListPage} from './pages/list/list';
import {HomePage} from './pages/home/home';


@App({
  templateUrl: 'build/app.html',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
class MyApp {
  // make HelloIonicPage the root (or first) page
  rootPage: any = HomePage;
  pages: Array<{title: string, component: any}>;

  constructor(
    private app: IonicApp,
    private platform: Platform,
    private menu: MenuController
  ) {
    this.initializeApp();

    // set our app's pages
    this.pages = [
      { title: 'Hello Ionic', component: HelloIonicPage },
      { title: 'My First List', component: ListPage }
    ];
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }

  openPage(page) {
    // close the menu when clicking a link from the menu
    this.menu.close();
    // navigate to the new page if it is not the current page
    let nav = this.app.getComponent('nav');
    nav.setRoot(page.component);
  }
}

app.html 文件

app.html file

  <ion-menu side-menu-content drag-content="false"   [content]="content">

  <ion-toolbar>
    <ion-title>Pages</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="#p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>

Homepage.ts 文件(本例中为登录页面).

Homepage.ts file (login page in this case).

   import {Page, Events,Alert,NavController,Loading,Toast,Storage,LocalStorage,SqlStorage} from 'ionic-angular';
import { FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl } from 'angular2/common';
import {HelloIonicPage} from '../hello-ionic/hello-ionic';
import {NgZone} from 'angular2/core';

@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {

 public Uname :string;
 public usrvalid:boolean;
 public usrpwd :boolean;
 public usrpwdlength:boolean;
 public usrvalidlength:boolean;
 public isUnchanged:boolean;
 public usrpwdzero:boolean;
 public usrvaliddigits:boolean;
 rootpage:any;

public Upwd:string;
  constructor(public nav:NavController) {
this.nav=nav;
this.isUnchanged=true;
var mediumRegex = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");

// rootPage: any = HomePage;

  }
}

推荐答案

我认为在 ionic 1 中使用了 drag-content 指令，对于 Ionic 2，您可以做的是从内部禁用它页类文件.

I think the drag-content directive is used in ionic 1, for Ionic 2 what you can do is disable it from within your page class file.

您可以通过从 ionic-angular 导入 MenuController 提供程序，然后调用 .swipeEnable(shouldEnableBoolean, menuId) 方法来实现此目的禁用页面类中的滑动手势(这也记录在 here).

You can do this by importing the MenuController provider from ionic-angular and then call the .swipeEnable(shouldEnableBoolean, menuId) method to disable the swipe gesture within your page's class (this is also documented here).

您的登录控制器应该是这样的...

Your login controller should be something like this...

import {Page, MenuController} from 'ionic-angular';

@Page({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
    constructor(public menu: MenuController) {
        this.menu.swipeEnable(false);
    }
}

如果您有多个菜单并且每个菜单都有一个 id，那么您可以像这样定位一个特定的菜单...

If you have multiple menus and each one has an id then you can target a specific menu like this...

this.menu.swipeEnable(false, `menuId`);

这篇关于在 Ionic 2 中禁用侧边菜单的滑动以打开登录页面(或任何页面)的手势的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！