我是Ionic 2& 2的新手. Angular2和我已经使用以下命令下载了一个新的Ionic模板
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>
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; } }
我认为drag-content指令用于离子1,对于Ionic 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`);