Ionic 2 - 在登录页面中禁用侧边菜单

R C*_*ieh 12 ionic2 angular

我打算在登录页面中禁用侧边菜单的滑动手势.我做的唯一更改是导入MenuController并在构造函数中将swipeEnable设置为false.

但是,在运行它之后,我不断收到语法错误:解析文件时出现意外的令牌(18:47).

import {App, Page, NavController, Nav,NavParams, IonicApp, Storage, LocalStorage, MenuController } from 'ionic-angular';
import {httpService} from '../../services/httpService';
import {HelloIonicPage} from '../hello-ionic/hello-ionic';
import {GettingStartedPage} from '../getting-started/getting-started';
import {SettingsPage} from '../settings/settings';

@Page({
  templateUrl: 'build/pages/log-in/log-in.html',
  providers: [httpService]
})

export class LoginPage {

  static get parameters(){
     return [[NavController],[httpService],[MenuController]];
   }

   constructor(navController, httpService, menu: MenuController) {

     this.menu = menu;
     this.navController = navController;
     this.httpService = httpService;
     this.local = new Storage(LocalStorage);
     this.menu.swipeEnable(false);
   }
}
Run Code Online (Sandbox Code Playgroud)

提前致谢.

tim*_*vin 13

以下在Ionic2 v.2.2.0上为我工作

  1. 打开src/app/app.html并向<ion-menu>元素添加ID

这样,

<ion-menu [content]="content">
Run Code Online (Sandbox Code Playgroud)

变成了这个.

<ion-menu id="myMenu" [content]="content">
Run Code Online (Sandbox Code Playgroud)
  1. 打开login.html并删除<ion-navbar>代码,<ion-header>以便菜单不会显示在页面上.

  2. 打开login.ts并导入MenuControllerionic/angular.

在构造函数中设置enable()MenuCtrl,以false和添加菜单ID作为第二个参数.即使未显示菜单,执行此操作也会阻止用户滑动以打开菜单.

login.ts示例

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

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {

  constructor(
    public navCtrl: NavController,
    public menuCtrl: MenuController
  ) {
    this.menuCtrl.enable(false, 'myMenu');
  }
}
Run Code Online (Sandbox Code Playgroud)


Ath*_*Raj 5

import {  MenuController } from 'ionic-angular';

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


ionViewDidEnter() {
    // the root left menu should be disabled on this page
    this.menu.enable(false);
  }

  ionViewWillLeave() {
    // enable the root left menu when leaving this page
    this.menu.enable(true);
  }
Run Code Online (Sandbox Code Playgroud)

这将隐藏菜单


Pat*_*ray 3

注释中的 G\xc3\xbcnter 应该是正确的。构造函数应该是:

\n\n
constructor(navController, httpService, menu) {...}\n
Run Code Online (Sandbox Code Playgroud)\n\n

当您使用纯 es6 javascript 时,您必须在静态 getparameters()函数中声明您的可注入项。然后在构造函数中声明代表每个可注入的变量名称,其顺序与在返回的数组中声明可注入的顺序相同。当您使用 TypeScript 时,会使用冒号语法,然后将其转换为纯 es6 javascript 表示法。换句话说,冒号语法是语法糖,仅当您的应用程序配置为处理 TypeScript 时才可用。

\n