禁用側菜單的刷卡中的離子來打開登錄頁面（或頁面）的姿勢2

Question

我是新來的離子2 & Angular2和我已經下載使用以下命令

Ionic start appname sidemenu --v2 --ts 

一個新的離子模板對於這個特定的解決方案，我添加了一個登錄頁面來驗證用戶。一旦驗證成功，用戶將被導航到使用側面菜單的菜單頁面。

由於該解決方案基於sidemenu模板，每當用戶向左滑動時，側邊菜單將顯示在登錄頁面上。

那麼有人可以請指導我糾正這個錯誤，並停止側視圖顯示時的菜單顯示。

我的代碼

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文件

<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文件（在這種情況下登錄頁）。

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; 

    } 
} 

Answer 1

我覺得drag-content指令離子1使用，離子2你可以做的是從你的網頁類文件中禁用它。

您可以通過從ionic-angular的MenuController提供商做到這一點，然後調用.swipeEnable(shouldEnableBoolean, menuId)方法來禁用頁面的類內的滑動手勢（這也證明here）。

你的登錄控制器應該是這樣的......

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，那麼你可以針對這樣一個特定的菜單......

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

Answer 2

您可以禁用/調用

$ ionicSideMenuDelegate.canDragContent（假）

能夠在任何網頁，隨時sidemenu

e.g：

angular.module（ 'ABC'）控制器（ 'xyzCtrl'，函數（$範圍，$ ionicSideMenuDelegate）{

$ionicSideMenuDelegate.canDragContent(false) 

}）;