离子 3 导航菜单未显示

Question

我有点非常恼火和困惑，因为侧面菜单没有出现在不同的情况下。

我的应用流程和要求是： 最初，有一个带有 3 个选项卡且没有侧边菜单的登录页面。在第一个选项卡上，有产品，您可以将它们添加到购物车。将这些添加到购物车后，您可以单击购物车进行结帐。此时，如果用户尚未登录，则会显示一个模型弹出窗口，其中包含"使用 facebook 登录"选项。成功登录后，将显示添加到购物车的商品的订单摘要页面。由于用户现在已登录，因此应显示侧边菜单。

但是，菜单图标中正在发生的事情会显示出来，但在单击时，没有任何反应。控制台等中没有错误。

我已经验证了，如果我不检查用户登录状态，那么在登录页面上菜单显示得很好。

相关代码：

应用.html

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

首页.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>

首页

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

登录.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); 
})
}
}

订单摘要页面.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>

Answer 1

您的导航流是错误的，您需要更改此流程，因为它的冲突菜单会从 OrderSummeryPage 弹出。

不要将 OrderSummeryPage 设置为根页面，因为您的菜单实现不再有效，并且不会显示在该页面上。

要解决此问题，您需要从主页推送OrderSummaryPage，在那里您有 2 个选项

1. 隐藏后退按钮并显示菜单按钮。
不要显示那里的菜单按钮，
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：在登录页面中更新您的登录方法

login(){
this.viewCtrl.dismiss()
}

现在，如果您想隐藏OrderSummery页面上的后退按钮，请使用以下代码

<ion-navbar hideBackButton="true"> // for hiding back button.

希望您能理解上述更改。

Answer 2

执行以下操作：在您的应用程序中.html

<ion-menu [content]="content" id="login">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<ion-icon [name]="p.icon" item-left></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with     side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>  

在 app.component.ts 的构造函数中

this.initializeApp();
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Home', component: HomePage, icon: "ios-home-outline" },
{ title: 'Page 1 title', component: Page1, icon: "ios-alert-outline" },
{ title: 'Page 2 title', component: Page2, icon: "ios-alert-outline" },
{ title: 'Page 3 title', component: Page3, icon: "ios-search-outline" },
{ title: 'Page 4 tile', component: Page4, icon: "ios-call-outline" },
{ title: 'Log Out', component: LogoutPage, icon: "ios-call-outline" }
];  

声明上面的页面：

pages: Array<{title: string, component: any, icon:any}>;  

现在，您想显示侧边菜单图标的位置将其添加到页面的构造函数中this.menuCtrl.enable(true, 'login');
您不想显示菜单的地方

this.menuCtrl.enable(false, 'login');  

对于您的问题，您可以尝试这个

if(loggIn == true){
this.menuCtrl.enable(true, 'login');
}else{
this.menuCtrl.enable(false, 'login');
}