javascript - 返回到 Ionic 2 中的其他页面时，菜单切换被禁用

Question

我的 tabs.ts 中有一个菜单切换，它工作正常，但是当返回到上一页并重新进入选项卡时，我单击 menuToggle 但它不起作用。为什么会出现这种情况？第一次可以用，后来就不行了。 请帮助我。

这是我的 tabs.ts 和我的 menutoggle :

   <ion-menu [content]="content" >
    
    <ion-header>
    <ion-toolbar>
   
           <img class="avatar" src="assets/img/i2.png">
           <div class="name-user">{{nombre}} {{apellido}}</div>
           <div class="rut-user">{{rut}}</div>

 
    </ion-toolbar>
  </ion-header>

   <ion-content >
      <ion-list>
     <div class="items-menu">
    <div class="item-menu" (click)="scan()">
          <ion-icon name="md-qr-scanner"></ion-icon>
           <div class="title">Escanear Producto</div>
    </div>


    <div class="item-menu">
       <ion-icon name="md-person"></ion-icon>
          <div class="title">Perfil</div>
    </div>
  <div class="item-menu">
      <ion-icon name="md-settings"></ion-icon>
         <div class="title">Opciones</div>
    </div>
  <div class="item-menu">
      <ion-icon name="md-information-circle"></ion-icon>
         <div class="title">Acerca De</div>
    </div>
  <div class="item-menu"  (click)="cerrarsesion()" >
    <ion-icon name="md-log-out"></ion-icon>
          <div class="title">Cerrar Sesion</div>
    </div>
</div>
     </ion-list>
   </ion-content>
  

   </ion-menu>
   <ion-nav [root]="rootPage" #content swipeBackEnabled="true" ></ion-nav> 


<ion-tabs color="primary">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home" ></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Carro" tabIcon="cart" tabBadge="2"  tabBadgeStyle="danger"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Perfil" tabIcon="md-person" ></ion-tab>
</ion-tabs>

这是我调用菜单的地方:

<ion-header>
  <ion-navbar>
     <button ion-button menuToggle>
      <ion-icon name="menu" class="color-icon"></ion-icon>
      </button>
      <ion-buttons end>
         <button icon-only ion-button (click)="refreshPage()">
          <ion-icon name="md-refresh" class="color-icon"></ion-icon>
        </button>  
    </ion-buttons>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

Answer 1

我认为这个问题与 issue here 有关。 。 首先是原因: 当您导航到页面时，页面 html 内容应该添加在 <ng-component></ng-component> 内元素，但它被添加到其外部。这使得它比菜单和覆盖层具有更高的 z-index。因此，当您切换菜单时，它实际上已激活，但您只是看不到它。

现在是解决方法 将以下内容添加到您的 app.scss文件或任何可以在全局范围内有效的地方:

ng-component{
    &.app-root{
        z-index: 10000;
    }
}

z-index 的值为 10,000，这样它将位于 ng 组件外部添加的页面之上，但仍低于高于 10,000 的模式和弹出窗口。