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

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.
}

希望这会有所帮助。

Answer 3

 <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 // Initial value set to 1 onSelectMenuItem(id): void { this.selectedMenuItem = id; }

Answer 4

我面临着同样的挑战。然后我解决了CSS问题。

当我们单击菜单时，自定义aria标签将附加到菜单，并在关闭dropdoen时被删除。这样，我们就可以使用CSS自定义选择器（适用于大多数现代浏览器）

.parentclass a [aria-expanded] {所需的}

某些情况下（如果有按钮）

.parentclass按钮[aria-expanded] {所需的}

谢谢

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

4 个答案: