4

我使用带有 ionic v4-beta3 的 sidemenu 项目

例如，我想在某些页面上禁用侧边菜单/login。

/home当我先加载页面然后导航到页面时，它工作正常/login。侧边菜单按预期消失。

当我在页面上重新加载我的应用程序时/login，菜单没有被禁用。

import { Component, OnInit } from '@angular/core';
import { MenuController } from '@ionic/angular';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  constructor(
    private menuController: MenuController
  ) {}

  ngOnInit() {}

  ionViewWillEnter() {
    console.log('ionViewWillEnter');
    this.menuController.enable(false);
  }

  ionViewDidLeave() {
    console.log('ionViewDidLeave');
    this.menuController.enable(true);
  }

}

如果使用 100 或 200 毫秒的 setTimeout 来调用enable方法，侧边菜单会消失，但它不是很干净......

ionViewWillEnter() {
    console.log('ionViewWillEnter');
    const timer = setTimeout(() => {
        clearTimeout(timer);
        this.menuController.enable(false);
    }, 100);
}

另一种解决方法是使用指令显示ion-menu何时window.location.pathName不等于。它正在工作，但我发现这也不是很干净....../login*ngIf

离子信息

Ionic:

   ionic (Ionic CLI)          : 4.1.1 
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.4
   @angular-devkit/schematics : 0.7.4
   @angular/cli               : 6.1.4
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.5
4

2 回答 2

1

此问题似乎在 4.0.0-beta.12 中得到解决，具体如下：

ionViewDidEnter() {
    this.menuController.enable(false);
}

ionViewDidLeave() {
    this.menuController.enable(true);
}
于 2018-09-29T01:56:04.127 回答
1

该MenuController.enable()方法是异步的。

您可以创建访客/已验证保护并在其中启用它，然后使用页面中的canActivate路由参数在页面中使用它。然后，当您的页面加载时，菜单将被正确配置。例如，对于经过身份验证的守卫：

@Injectable({
  providedIn: 'root',
})
export class AuthenticatedGuard implements CanActivate {
  constructor(private menuController: MenuController) {}

  async canActivate(): Promise<boolean> {
    const isAuthenticated = true; // Adjust where you get this value
    await this.menuController.enable(isAuthenticated);

    return isAuthenticated;
  }
}

这适用于 Ionic4/5。

您应该menuId在组件中使用属性来<ion-menu/>微调标识并能够使用多个菜单。然后你可以打电话.enable(isAuthenticated, menuId);

于 2020-10-15T03:16:34.570 回答