javascript - 单击一次 Angular Material 打开菜单

Question

我在一个组件中有 2 个 Angular Material 图标，每个图标都有一个菜单 - 例如 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>

示例展示 angular material sample .我的问题是如何在单个短片中打开和关闭菜单？

Answer 1

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