禁用滑动以查看sidemenu ionic 2

Question

我正在使用sidemenu ionic 2.当我从左向右滑动此页面时,侧面菜单滑出我需要在特定页面中禁用侧面菜单.

app.html

    <ion-menu [content]="content">
     <ion-content>
      <ion-list>
       <button ion-item *ngFor="let p of pages" menuClose (click)="openPage(p)" >
        <ion-icon name="{{p.icon}}" item-left></ion-icon>
        {{p.title}}
      </button>
     </ion-list>
  </ion-content>
</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="true"></ion-nav>

page.html我在此页面中禁用了swipemenu,仅在我滑动时禁用

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
@Component({
  templateUrl: 'build/pages/portrait/portrait.html'
})
export class Portrait {
}

page.html中

<ion-navbar persianred *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>
   Portrait
  </ion-title>
</ion-navbar>

Answer 1

根据您要禁用菜单的位置,有几种方法可以执行此操作:

1. 仅在一页上禁用它
2. 在某些页面上禁用它(不重复重复相同的代码)
3. 在所有页面中禁用它

1)仅在一页上禁用它

如果要禁用滑动以在一个页面中查看,最简单的方法是注入MenuController实例并使用该swipeEnable(shouldEnable, menuId)方法(Ionic docs).

import { NavController, MenuController } from 'ionic-angular/index';
import { Component } from "@angular/core";

@Component({
  templateUrl:"home.html"
})
export class HomePage {

  constructor(private menu: MenuController, ...) { }

  ionViewDidEnter() {
    this.menu.swipeEnable(false);

    // If you have more than one side menu, use the id like below
    // this.menu.swipeEnable(false, 'menu1');
  }

  ionViewWillLeave() {
    // Don't forget to return the swipe to normal, otherwise 
    // the rest of the pages won't be able to swipe to open menu
    this.menu.swipeEnable(true);

    // If you have more than one side menu, use the id like below
    // this.menu.swipeEnable(true, 'menu1');
   }

}

请注意两件事:

1)如果你使用id,那么你需要将它添加id到你的菜单:

<ion-menu [content]="content" side="left" id="menu1">

2)您需要已加载视图才能禁用菜单,因此一种方法是使用该ionViewDidEnter事件.

2)在某些页面上禁用它

如果要在某些页面(如登录/注册页面)上禁用侧面菜单,但您不想MenuController在每个页面上注入然后处理ionViewDidEnter/ ionViewWillLeave,则可以使用自定义装饰器.请查看此SO答案以获取更多信息.

3)在所有页面中禁用它

如果要禁用滑动以在应用中的任何位置查看,最简单的方法是使用swipeEnabled输入属性(Ionic docs):

<ion-menu [content]="content" [swipeEnabled]="false">...</ion-menu>