angular - ionic 3 导航菜单不显示

Question

我对侧边菜单在不同情况下不显示感到有点恼火和困惑。

我的应用流程和要求是: 最初，有一个包含 3 个选项卡且没有侧边菜单的登录页面。在第一个选项卡上，有产品，您可以将它们添加到购物车。将这些添加到购物车后，您可以单击购物车进行结帐。此时，如果用户尚未登录，则会出现一个带有 sign in with 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();
    }
  }

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

第二步:在LoginPage中更新您的登录方式

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

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

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

希望您能理解以上变化。