Deaktivieren Sie das Swipe Seite Menü Geste für Login-Seite zu öffnen (oder jeder Seite) in Ionic 2

Question

Ich bin neu zu Ionic 2 & Angular2 und ich habe eine neue Ionic-Vorlage mit dem folgenden Befehl

Ionic start appname sidemenu --v2 --ts 

heruntergeladen Für diese spezielle Lösung habe ich eine Login-Seite hinzugefügt, um einen Benutzer zu validieren. Sobald die Validierung erfolgreich ist, wird der Benutzer zu der Menüseite navigiert, die das Seitenmenü verwendet.

Da die Lösung auf der Vorlage sidemenu basiert, wird das Seitenmenü auf der Anmeldeseite angezeigt, wenn der Benutzer nach links wischt.

So kann mir jemand bitte helfen, diesen Fehler zu korrigieren und das Seitenmenü nicht mehr anzeigen, wenn die Ansicht übersprungen wurde.

Mein Code

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 Datei

<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 Datei (Login-Seite in diesem Fall) einreichen.

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

Ich denke, die drag-content Richtlinie in ionischen 1 verwendet wird, für Ionic 2, was können Sie es deaktivieren aus Ihrer Seite Klassendatei ist.

Sie können dies tun, indem Sie die MenuController Anbieter von ionic-angular importieren und dann die .swipeEnable(shouldEnableBoolean, menuId) Methode rufen Sie die Swipe-Geste innerhalb Ihrer Seite Klasse zu deaktivieren (dies auch here dokumentiert ist).

Ihre Login-Controller so etwas wie dies sein sollte ...

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

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

Wenn Sie mehrere Menüs haben und jeder hat eine ID, dann können Sie ein bestimmtes Menü wie dieses Ziel ...

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

Answer 2

Sie können durch Aufruf

$ ionicSideMenuDelegate.canDragContent (false)

jeder Seite sidemenu jederzeit deaktivieren/aktivieren

z.B.

angular.module ('ABC') Regler ('xyzCtrl', function ($ Umfang, $ ionicSideMenuDelegate) {

$ionicSideMenuDelegate.canDragContent(false) 

});