角度 – 离子3导航菜单不显示
我对在不同情况下没有出现的侧面菜单有点超级烦恼和困惑.
我的应用流程和要求是: 然而,正在发生的是菜单图标显示但点击没有任何反应.控制台等没有错误 我已经验证,如果我没有检查用户登录状态,那么在登录页面上菜单显示就好了. 相关代码: <ion-menu [content]="content" type="overlay" style="opacity:0.95"> <ion-header> <ion-toolbar> <ion-title> Menu </ion-title> </ion-toolbar> </ion-header> <ion-content style="background-color: #F5F5F6"> <ion-grid no-padding> <ion-row style="padding-top:20px"> <ion-col text-center> <button ion-button round (click)="doLogout()">Sign Out</button> </ion-col> </ion-row> </ion-grid> </ion-content> </ion-menu> <ion-nav [root]="rootPage" #content></ion-nav> app.component.ts @Component({ templateUrl: 'app.html' }) export class MyApp { @ViewChild(Nav) nav: Nav; rootPage:any = TabsPage; } home.html(第一个标签) ion-header> <ion-navbar> <button *ngIf="core.user.loggedIn == true" ion-button menuToggle icon-only style="display: block !important;"> <ion-icon name='menu'></ion-icon> </button> <ion-title>Cakes</ion-title> <ion-buttons end> <button *ngIf="getCartCount() > 0" ion-button (click)="openCart()"><ion-icon name="cart"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header> home.ts openCart(){ console.log('start of open cart:' + this.core.user.loggedIn) if(this.core.user.loggedIn == false){ //user not logged in so first show login screen console.log('take to login screen') let modal = this.modalCtrl.create(LoginPage); modal.present(); } } Login.ts doLogin(){ if (this.platform.is('cordova')) { return this.fb.login(['email','public_profile']).then(res => { const facebookCredential = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken); firebase.auth().signInWithCredential(facebookCredential); this.navCtrl.setRoot(OrderSummaryPage); }) } } OrderSummaryPage.html <ion-header> <ion-navbar> <button ion-button menuToggle icon-only style="display: block !important;"> <ion-icon name='menu'></ion-icon> </button> <ion-title>Order Summary</ion-title> </ion-navbar> </ion-header>
您的导航流程错误,您需要将此流程更改为从OrderSummeryPage弹出的冲突菜单.
不要将OrderSummeryPage设置为根页面,因为您的菜单实现不再有效且不会在该页面上显示. 要解决此问题,您需要从主页推送OrderSummaryPage,并在那里有2个选项 >隐藏后退按钮和显示菜单按钮. 通过单击菜单按钮,您将看到菜单屏幕. 检查此代码: 第1步:更新您的OpenCart方法: openCart(){ let loginModal = this.modalCtrl.create(LoginPage,{ userId: 8675309 }); loginModal.onDidDismiss(data => { console.log(data); this.navCtrl.push(OrderSummaryPage); }); loginModal.present(); } 第2步:在LoginPage中更新您的登录方法 login(){ this.viewCtrl.dismiss() } 现在如果你想在OrderSummeryPage上隐藏按钮,请使用下面的代码 <ion-navbar hideBackButton="true"> // for hiding back button. 希望你能站在上面的变化. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |