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

问题描述

我是Ionic 2& 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 file

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;

  }
}

推荐答案

我认为 drag-content 指令用于离子1，对于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 提供程序来完成此操作c $ c>然后调用 .swipeEnable（shouldEnableBoolean，menuId）方法来禁用页面类中的滑动手势（这也记录在案这里）。

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