禁用Ionic4菜单

Question

我是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中，我从存储wheather获得一个值，这是用户的第一个登录名。如果这是第一次登录，他应该被路由到/intro

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

在介绍页面上，用户可以单击一个设置存储变量的按钮，并将其路由回/home。

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

Answer 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>

Answer 2

因此，如果用户在介绍页面上，则需要隐藏菜单。

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

Answer 3

禁用或启用侧菜单的最佳方法是使用其enable()属性。考虑到您只需要在intro页面上处理它，并且您只有一个菜单，您可以利用Ionic的View并在您的入门页面中保留如下方法

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

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