如何检查“材料角度”中的“菜单”是否打开？

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>

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绑定来更改按钮的样式！