如何在 ionic 4 中禁用侧边菜单？答案

【问题标题】：How to disable side menu in ionic 4?如何在 ionic 4 中禁用侧边菜单？
【发布时间】：2019-01-19 00:27:17
【问题描述】：

我正在使用 this.menuCtrl.swipeEnable(false); 用于 ionic 3 应用程序。这适用于禁用侧面菜单。但是，它不适用于离子 4！下面是我的 ionic 4 代码示例：

login.page.ts

constructor(public loginService: LoginService, private router: Router, public menuCtrl: MenuController) {
    this.menuCtrl.swipeEnable(false);
   }

app.component.html

<ion-app>
  <ion-split-pane>
    <ion-menu type="push">
      <ion-header>
        <ion-toolbar color="success">
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

【问题讨论】：

标签： angular ionic-framework ionic3 hybrid-mobile-app ionic4

【解决方案1】：

试试

this.menuCtrl.enable(false);

这里似乎也有答案disable menu on login page ionic 4

【讨论】：

我在构造函数中尝试了this.menuCtrl.enable(false);。但是，它不适用于 ionic 4。但是，当我编写 ionViewWillEnter() { this.menuCtrl.enable(false); } 这个方法并从构造函数中调用它时，它工作正常！ @Troy DC 汤普森

【解决方案2】：

this.menuCtrl.enable(false);

这也适用于构造函数。我在 ionic v4 - beta.2 项目中使用它，它工作正常。

另外，我看到您正在使用 ionic 和 angular，因此您也可以使用 OnInit 生命周期挂钩。

【讨论】：

是的，我正在使用带有 Angular 的 ionic 4。但是，如果我在构造函数中写这个this.menuCtrl.enable(false);，它就不起作用了。但是每当我写ionViewWillEnter() { this.menuCtrl.enable(false); } 时，它都可以正常工作。但是，当我重新启动服务器时它会产生问题。所以，我也从构造函数中调用ionViewWillEnter() 方法。然后它工作正常！
ionViewWillEnter 是一个生命周期事件，永远不应手动调用它。我在构造函数中使用了上面的代码，它工作正常
是的，我知道 ionViewWillEnter 是一个生命周期事件。但是当我重新启动服务器时，ionViewWillEnter 第一次不起作用。我不知道为什么会这样。为此，我在构造函数中调用了 ionViewWillEnter。
这意味着代码中还有其他问题。如果你手动调用 ionViewWillEnter 也会被调用两次

【解决方案3】：

首先，swipeEnable() 现在是 swipeGesture()。

其次，我在 MenuController 上遇到了类似的问题，并且在意识到阅读 ionic 核心文档是明智的之前，我将头撞到墙上的时间超过了我将要披露的时间。 p>

我有多个侧边菜单，每个侧边菜单都有一个唯一的 ID，默认设置为 false，必须在特定页面上启用。但是 MenuController 无法识别我传入的 id。

脑震荡到无意识的地步，我在 github 上打开了 ionic 核心文档，得知 MenuController 现在查找的是 menu-id，而不是 id。所以：

<ion-menu menu-id="myMenu">...

被抓，例如：

this.menuCtrl.enable(true, 'myMenu')

有效。

回想起来，新方法和找到它的解决方案似乎都很明显。

【讨论】：

我应该注意到，MenuController 仍然无法正常工作，即使它现在可以识别 id。如果我将启用代码放在构造函数或 ngOnInit 中，它不会做任何事情。就像控制器加载时间过长一样。因此，我目前正在使用 @HostListener 启用菜单，这不是最佳选择。
你有没有遇到过 ASSERT: can not be animating in ion-menu when disable a menu?

【解决方案4】：

对我来说它在方法 ngOnInit 中的工作

ngOnInit() { 
 this.menuCtrl.enable(false); // or true 
}

【讨论】：

【解决方案5】：

在你的 login.page.ts 中试试这个

constructor(private navCrtl: NavController, private menu: MenuController) { this.menu.enable(false); }

【讨论】：