在 Ionic4 中禁用菜单答案

【问题标题】：Disable Menu in Ionic4在 Ionic4 中禁用菜单
【发布时间】：2019-12-28 21:04:42
【问题描述】：

我是 Ionic4 的新手，目前正在为我的论文开发一个应用程序。这个问题似乎很简单，但我搜索了几个小时，仍然没有工作的遮阳篷。

场景：

在我的 app.component.html 上，我有一个简单的 SideMenu：

<ion-app>
    <ion-split-pane>
        <ion-menu>
        </ion-menu>
        <ion-router-outlet main></ion-router-outlet>
    </ion-split-pane>
</ion-app>

在 app.component.ts 中，我从存储中获得一个值，无论它是用户的第一次登录。如果这是第一次登录，他应该被路由到 /intro：

this.storage.get('selectedClass').then( val => {
    this.firstLogin = val == undefined;
    if(this.firstLogin){
        this.router.navigateByUrl('/intro', { replaceUrl: true });
    }
});

在介绍页面上，用户可以单击设置存储变量并路由回 /home

的按钮

问题：如果用户在 IntroPage 上，如何隐藏菜单？

【问题讨论】：

标签： angular ionic-framework ionic3 angular6 ionic4

【解决方案1】：

您可以使用 ngIf 实现此目的

<ion-app>
    <ion-split-pane>
        <ion-menu *ngIf="!firstLogin">
        </ion-menu>
        <ion-router-outlet main></ion-router-outlet>
    </ion-split-pane>
</ion-app>

【讨论】：

这就是我已经尝试过的。但是该值仅在构造函数中更新/设置一次。所以导航到另一个站点不会更新它，因为 AppComonent 不会再次创建。

【解决方案2】：

因此，如果用户在介绍页面上，您想隐藏菜单。

我要做的是使用 css 隐藏菜单，然后将此 css 添加到介绍页面的 css 文件中。然后当用户进入介绍页面时，将应用介绍 css 并隐藏菜单。这有意义吗？

【讨论】：

【解决方案3】：

禁用或启用侧边菜单的最佳方法是使用其enable() 属性。考虑到您只需要在介绍页面上处理它并且您只有一个菜单，您可以在介绍页面中利用 Ionic 的 View load 和 leave 方法

ionViewDidLoad() {
  this.menuCtrl.enable(false);
}

ionViewWillLeave() {
  this.menuCtrl.enable(true);
}

【讨论】：

【解决方案4】：

在 ionic 中启用/禁用菜单的最佳方法是使用 MenuController。

在构造函数中定义菜单控制器。确保导入 MenuController。

constructor(private menuController: MenuController){ }
启用菜单

this.menuController.enable(true, yourmenuid);
禁用菜单

this.menuController.enable(false, yourmenuid);

您可以将 menuController 启用/禁用代码放在构造函数或 ngOnInit 中。取决于您希望何时更改菜单。

【讨论】：