Ionic2 menuToggle 动态隐藏答案

【问题标题】：Ionic2 menuToggle hide dynamicallyIonic2 menuToggle 动态隐藏
【发布时间】：2018-01-03 09:09:01
【问题描述】：

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

谢谢

【问题讨论】：

更新您的离子菜单的代码

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

假设您使用 Menu、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;
}

【讨论】：

谢谢@Aravind。对不起，我可能没有正确地问这个问题。如何隐藏菜单切换按钮？带有 3 条条纹的按钮。
当你隐藏它时。您将如何再次启用它。\

【解决方案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文件中，你可以通过改变“hideMenu”的值来控制menuToggle的显示状态，例如，

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

【讨论】：

【解决方案4】：

您可以为此使用 'ionic-angular' 的事件。

在用户事件上使用此代码块：

this.events.publish("nameOfYourEvent", params)
//params => optional

订阅活动

this.events.subscribe("nameOfYourEvent",(params) => {
    //toggleMenuVisibility Code goes here
    this.hideMenu = true;
})

在观点上：

<button ion-button menuToggle *ngIf="!hideMenu">//[hidden] attribute is not working for some reason.
  <ion-icon name="menu"></ion-icon>
</button>

不要忘记从“ionic-angular”导入事件类。

从“离子角度”导入{事件}；

【讨论】：