Ionic2 menuToggle动态隐藏

Question

我正在使用Ionic2，并且希望在用户事件上显示/隐藏menuToggle。在Ionic1中，This是如何完成的。有谁知道如何在Ionic2中做到这一点吗？

​

​

谢谢

Answer 1

<ion-header>
    <ion-navbar>
       <button ion-button menuToggle>
         <ion-icon name="menu"></ion-icon>
       </button>
     </ion-navbar>
</ion-header>

从您不想显示菜单栏的页面中删除此HTML代码。

Answer 2

假设您使用菜单、ToggleMenu组件，下面是您的解决方案

菜单栏内容

<ion-menu [content]="mycontent" [enabled]="customVariable">
  <ion-content>
    <ion-list>
      <ion-item menuClose detail-none>Close Menu</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

userEvent(){
    this.customVariable=false;
}

Answer 3

假设您的代码如下：

<ion-menu [content]="mycontent" [class.hide]="hideMenu">
 <ion-content>
   <ion-list>
     <ion-item menuClose detail-none>Close Menu</ion-item>
   </ion-list>
 </ion-content>
</ion-menu>

然后在组件的.scss文件中添加隐藏样式：

.hide{display: none !important}

最后，在.ts文件中，您可以通过更改“menuToggle”的值来控制hideMenu的显示状态，例如，

hideMenu: boolean = false; // at first the menuToggle is show
....
btnClicked(){
  this.hideMenu = !this.hideMenu;
}