角材料只需单击一下即可打开菜单

Question

我在一个组件中有 2 个角度材料图标，每个图标都有一个菜单 - 例如menu1和menu2。当我单击菜单1图标时，它将打开菜单1列表。然后，当我单击menu2图标时，我需要关闭菜单1列表并打开菜单 2。但是现在我需要单击两次才能完成此活动。第一次单击将关闭菜单1，只有第二次单击才会打开菜单 2。如何使用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>

示例呈现角度材料样品。我的问题是如何在一个短时间内打开和关闭菜单？

Answer 1

Menu1 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();
}