我在一个组件中有2个棱角材质图标,每个图标都有一个菜单-例如 menu1 和 menu2 。当我单击 menu1 图标时,它将打开 menu1 列表。然后,当我单击 menu2 图标时,我需要关闭 menu1 列表并打开 menu2 。但是现在我需要单击两次以执行此活动。第一次单击将关闭 menu1 ,仅第二次单击将打开 menu2 。如何使用mat-menu
一键打开第二个菜单?
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 #menu1="matMenu">
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Redial</span>
</button>
</mat-menu>
Menu2 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>
示例存在angular material sample。我的问题是如何在短时间内打开和关闭菜单?
答案 0 :(得分:0)
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>
Menu2 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();
}