时间戳

首页 > 解决方案 > 如何检查 Material Angular 中的 mat-menu 是否打开？

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

问题描述

我正在寻找一种方法来检查我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>

标签： cssangulartypescriptangular-material

解决方案

您可以使用 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 绑定来更改按钮的样式！

推荐阅读