Disable swipe bên menu để mở cử chỉ cho trang đăng nhập (hoặc bất kỳ trang nào) trong Ionic 2

Question

Tôi mới đến Ionic 2 & Angular2 và tôi đã tải về một mẫu Ionic mới với lệnh sau

Ionic start appname sidemenu --v2 --ts 

Đối với giải pháp cụ thể này, tôi đã thêm một trang đăng nhập để xác thực người dùng. Sau khi xác thực thành công, người dùng sẽ được điều hướng đến trang menu sử dụng menu bên.

Khi giải pháp dựa trên mẫu sidemenu, menu bên đang hiển thị trên trang đăng nhập bất cứ khi nào người dùng vuốt sang trái.

Vì vậy, ai đó có thể vui lòng hướng dẫn tôi sửa lỗi này và ngăn menu bên hiển thị khi chế độ xem được vuốt.

Mã của tôi

App.ts nộp

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); 
    } 
} 

tập tin 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 nộp (trang đăng nhập trong trường hợp này).

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

Tôi nghĩ rằng chỉ drag-content được sử dụng trong ion 1, cho Ionic 2 những gì bạn có thể làm là vô hiệu hóa nó từ bên trong tập tin lớp trang của bạn.

Bạn có thể làm điều này bằng cách nhập các nhà cung cấp MenuController từ ionic-angular và sau đó gọi các .swipeEnable(shouldEnableBoolean, menuId) phương pháp để vô hiệu hóa các cử chỉ swipe trong lớp trang của bạn (điều này cũng là tài liệu here).

điều khiển đăng nhập của bạn nên được một cái gì đó như thế này ...

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

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

Nếu bạn có nhiều menu và mỗi người có một id sau đó bạn có thể nhắm mục tiêu một thực đơn cụ thể như thế này ...

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

Answer 2

Bạn có thể tắt/bật sidemenu bất cứ lúc nào tại bất kỳ trang nào bằng cách gọi

$ ionicSideMenuDelegate.canDragContent (false)

ví dụ:.

angular.module ('ABC') điều khiển ('xyzCtrl', function ($ phạm vi, $ ionicSideMenuDelegate) {

$ionicSideMenuDelegate.canDragContent(false) 

});