css - 如何检查 Material Angular 中的垫子菜单是否打开？

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 绑定(bind)来更改按钮的样式!