离子3导航菜单不显示

Question

我对在不同情况下没有出现的侧面菜单有点超级烦恼和困惑.

我的应用流程和要求是:最初有一个包含3个选项卡且没有侧边菜单的登录页面.在第一个选项卡上有产品,您可以将它们添加到购物车.一旦你将它们添加到购物车,你可以点击购物车结帐.此时,如果用户尚未登录,则会显示模型弹出窗口,并显示登录facebook选项.在成功登录时,订单摘要页面会显示添加到购物车的商品.用户现在已登录,因此应显示侧边菜单.

然而,正在发生的是菜单图标显示但点击没有任何反应.控制台等没有错误

我已经验证,如果我没有检查用户登录状态,那么在登录页面上菜单显示就好了.

相关代码: app.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;
}

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>

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步:在LoginPage中更新您的登录方法

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

现在如果你想在OrderSummeryPage上隐藏按钮,请使用下面的代码

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

希望你能站在上面的变化.

Answer 2

这样做：在你的 app.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');
}