如何检查Material Angular中的mat-menu是否打开？

Question

我正在寻找一种方法来检查我的mat-menu是否打开，以便根据菜单状态向打开它的button添加一个类，使用[ngClass]实现。

<button mat-stroked-button mdbWavesEffect [matMenuTriggerFor]="menu">Actions</button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass="custom">
        <a routerLink="/attendence/detail" mat-menu-item>View Attendance</a>
        <a routerLink="/adherence/detail" mat-menu-item>View Adherece</a>
        <button mat-menu-item>Edit Agent</button>
        <button mat-menu-item>Upload photo</button>
        <button mat-menu-item>Deactivate Agent</button>
    </mat-menu>

- IvanS95

Answer 1

您可以使用Material matMenuTrigger指令来检查菜单是否已打开。

<button mat-button [matMenuTriggerFor]="menu"   #t="matMenuTrigger">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>
{{t.menuOpen}}

点击这里查看示例：https://stackblitz.com/edit/angular-9hbzdw

现在，您可以使用ngClass绑定来更改按钮的样式！

- Chellappan வ

---

我尝试了这个解决方案，但是一旦我的视图准备好，我就会得到一个“未定义”的结果，我正在输出“menuOpen”的值。 - IvanS95

你是否添加了模板引用？ - Chellappan வ

是的，如果我像您一样在我的 HTML 中输出 t.menuOpen 的值：{{ t.menuOpen }} -- 我会得到预期的“true”和“false”值，但我无法使用该值来评估一个条件以传递给 ngClass 指令。 - IvanS95

你能分享一下你的代码吗？你使用了ViewChild或其他什么东西吗？ - Chellappan வ

搞定了！看起来是我的语法有问题。我开始尝试使用其他指令进行测试，最终让ngClass工作了，谢谢。[ngClass]="{'active':t.menuOpen === true}"我忘记在类名上加单引号了。 - IvanS95

更简单的方法是使用 [class.open]="t.menuOpen"。 - Patronaut

Answer 2

您可以将方法绑定到 "menuOpened"，每当菜单打开时该方法将被调用。

<mat-menu #menu="matMenu" [overlapTrigger]="false" (menuOpened)="isOpened($event)" panelClass="custom">
                    <a routerLink="/attendence/detail" mat-menu-item>View Attendance</a>
                    <a routerLink="/adherence/detail" mat-menu-item>View Adherece</a>
                    <button mat-menu-item>Edit Agent</button>
                    <button mat-menu-item>Upload photo</button>
                    <button mat-menu-item>Deactivate Agent</button>
                </mat-menu>

在你的组件中添加这个方法：

isOpened(evt:any){
// set you flag here that you can use in ng-class for the button.
}

希望这能帮助到您。

- Avinash Maurya

Answer 3

有时候，当您的Angular应用程序使用onPush changeDetection时，可能会遇到mat-menu问题。在这种情况下，您需要让Angular知道菜单是打开还是关闭。

Angular Material提供了检测菜单是否打开的事件。

1. menuOpened: 当关联的菜单被打开时发出的事件。 2. menuClosed: 当关联的菜单被关闭时发出的事件。

以下是代码：

<button mat-button #menuOption="matMenuTrigger" [matMenuTriggerFor]="menu"
            (menuOpened)="menuOption.menuOpen" (menuClosed)="menuOption.menuOpen">
      Menu
      <span>{{menuOption.menuOpen ? 'open': 'closed'}}</span>
</button>

- Abhinav Akhil

---

我认为这是最好的、最惯用的解决方案，同时也节省了一些代码。 - Chen Peleg

Answer 4

我曾面临相同的情况，我使用了CSS解决方案。

当我们单击菜单时，会向菜单添加自定义的aria标签，关闭下拉菜单时该标签会被删除。通过这种方式，我们可以使用CSS自定义选择器（适用于大多数现代浏览器）来实现样式控制。

例如：

父类a元素[aria-expanded] { 你所需要的样式 }

某些情况下，如按钮：

父类 button元素[aria-expanded] { 你所需要的样式 }

谢谢！

- Ramsarvan

Answer 5

 <button mat-stroked-button mdbWavesEffect [matMenuTriggerFor]="menu">Actions</button>
            <mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass="custom">
                <a routerLink="/attendence/detail" mat-menu-item>View Attendance</a>
                <a routerLink="/adherence/detail" mat-menu-item>View Adherece</a>
                <button [ngClass]="selectedMenuItem ===1 ? 'active' : ''" (click)="onSelectMenuItem(1)" mat-menu-item>Edit Agent</button>
                <button [ngClass]="selectedMenuItem ===2 ? 'active' : ''" (click)="onSelectMenuItem(2)" mat-menu-item>Upload photo</button>
                <button [ngClass]="selectedMenuItem ===3 ? 'active' : ''" (click)="onSelectMenuItem(3)" mat-menu-item>Deactivate Agent</button>
            </mat-menu>

selectedMenuItem = 1 // 初始值设置为1 onSelectMenuItem(id): void { this.selectedMenuItem = id; }

- Malindu Sandaruwan