javascript - Angular 材质一键打开菜单
问题描述
我在一个组件中有 2 个有角度的材质图标,每个都有一个菜单 - 例如menu1和menu2。当我单击menu1图标时,它将打开menu1列表。然后,当我单击menu2图标时,我需要关闭menu1列表并打开menu2。但是现在我需要单击两次才能执行此活动。第一次单击关闭menu1,只有第二次单击打开menu2。如何使用 实现第二个菜单的一键打开mat-menu
?
菜单1 html
<button mat-icon-button [matMenuTriggerFor]="menu1" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu1="matMenu">
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Redial</span>
</button>
</mat-menu>
菜单2 html
<button mat-icon-button [matMenuTriggerFor]="menu2" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu2="matMenu">
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Redial</span>
</button>
</mat-menu>
示例呈现角材料样本。我的问题是如何在一个短的时间内打开和关闭菜单?
解决方案
菜单1 html
<button mat-icon-button [matMenuTriggerFor]="menu1" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu (closed)="menuOneClosed()" #menu1="matMenu">
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Redial</span>
</button>
</mat-menu>
菜单2 html
<button mat-icon-button [matMenuTriggerFor]="menu2" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu2="matMenu">
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Redial</span>
</button>
</mat-menu>
组件实例
@ViewChild(MatMenuTrigger) menu2: MatMenuTrigger;
menuOneClosed(){
this.meu2.openMenu();
}