使用 Angular 在 Ionic 5 中打开离子菜单时隐藏任何 div 或文本

Question

我想在 ionic 侧面菜单打开时隐藏工具栏 .custom-nav-link div，并在侧面菜单关闭时再次显示它。如何根据离子菜单是打开还是关闭来检测和应用 HTML 中的条件？

<ion-toolbar>
  <div class="containers">
    <div class="logo" >
      <h4>My Toolbar</h4>
    </div>

    <div class="custom-nav-link" slot="end">
      <nav class="desktop-nav">
        <ul class="nav-list">
          <li *ngFor="let p of buttonLinks">
            <a href="">{{p.title}}</a>
          </li>
        </ul>
      </nav>
    </div>

    <div class="">
      <ion-buttons slot="start">
        <ion-menu-button menu="userMenu">
          <ion-icon name="apps"></ion-icon>
        </ion-menu-button>
      </ion-buttons>
    </div>

  </div>
</ion-toolbar>

Answer 1

您可以为此使用 MenuController

import { MenuController } from '@ionic/angular';

constructor(public menuCtrl:MenuController){}

在HTML

<ion-toolbar>
  <div class="containers">
    <div class="logo" >
      <h4>My Toolbar</h4>
    </div>

    <div *ngIf="!menuCtrl.isOpen('menuId')" class="custom-nav-link" slot="end">
      <nav class="desktop-nav">
        <ul class="nav-list">
          <li *ngFor="let p of buttonLinks">
            <a href="">{{p.title}}</a>
          </li>
        </ul>
      </nav>
    </div>

    <div class="">
      <ion-buttons slot="start">
        <ion-menu-button menu="userMenu">
          <ion-icon name="apps"></ion-icon>
        </ion-menu-button>
      </ion-buttons>
    </div>

  </div>
</ion-toolbar>

Answer 2

试试这个：

import { MenuController } from '@ionic/angular';

public isMenuOpen: boolean = false;

constructor(public menuCtrl:MenuController){}

ngOnInit() {   // or on click of menu button
    this.menuCtrl.isOpen('userMenu').then(res => {
        this.isMenuOpen = res;
    })
}

和html

<div *ngIf="!isMenuOpen" class="custom-nav-link" slot="end">
  <nav class="desktop-nav">
    <ul class="nav-list">
      <li *ngFor="let p of buttonLinks">
        <a href="">{{p.title}}</a>
      </li>
    </ul>
  </nav>
</div>

<div class="">
  <ion-buttons slot="start">
    <ion-menu-button menu="userMenu">
      <ion-icon name="apps"></ion-icon>
    </ion-menu-button>
  </ion-buttons>
</div>

Answer 3

试试这个，组件每秒（间隔）查找菜单的状态，并将其设置在可以从模板访问的属性上

export class SomeComponent implements OnInit {
  public menuEnabled: boolean
  public menuIsopen: boolean

  constructor(public menuController: MenuController) { }

  async ngOnInit() {
    this.menuEnabled = false
    this.menuIsOpen = false
    setInterval(async () => {
      this.menuEnabled = await this.menuController.isEnabled()
      this.menuIsOpen = await this.menuController.isOpen()
    }, 1000)
  }

  // you can also try using an observable
  // menuEnabled() {
  //   return from(this.menuController.isEnabled())
  // }

}

然后在你的模板中

<div *ngIf="!menuEnabled || !menuIsOpen"></div>

使用 Angular 在 Ionic 5 中打开离子菜单时隐藏任何 div 或文本

Hide any div or text when ion-menu is opened in Ionic 5 using Angular

ionic-framework

ionic-native

angular

ionic4