Angular 19+Material3嵌套mat-menu点击子菜单意外关闭问题求助

问题根源 #

你当前的嵌套菜单触发器（带event图标的按钮）没有正确嵌套在父菜单的mat-menu-item元素内，Material 3的mat-menu组件默认会将菜单内非mat-menu-item元素的点击事件视为"关闭菜单"的触发信号，导致点击子菜单触发器时父菜单直接关闭。

修正方案 #

将子菜单触发器包裹在mat-menu-item中，同时确保触发器的[matMenuTriggerFor]正确绑定子菜单：

<!-- Trigger for First Menu -->
<button
  [matMenuTriggerFor]="candidatMenu"
  class="cursor-pointer"
>
  <mat-icon>more_vert</mat-icon>
</button>

<!-- 父菜单定义（你之前遗漏的部分） -->
<mat-menu #candidatMenu="matMenu">
  <!-- Calendar Menu Trigger - 必须放在mat-menu-item内 -->
  <ng-container *ngIf="showCalendar">
    <button mat-menu-item [matMenuTriggerFor]="menuCal">
      <mat-icon>event</mat-icon>
      <span>日历操作</span>
    </button>
  </ng-container>
  <!-- 其他父菜单项 -->
</mat-menu>

<!-- Calendar Mat Menu -->
<mat-menu #menuCal="matMenu">
  <button mat-menu-item (click)="doSomething()">
    <mat-icon>add</mat-icon>
    <span>Option 1</span>
  </button>
  <button mat-menu-item (click)="doSomethingElse()">
    <mat-icon>add</mat-icon>
    <span>Option 2</span>
  </button>
  <button mat-menu-item (click)="anotherAction()">
    <mat-icon>add</mat-icon>
    <span>Option 3</span>
  </button>
</mat-menu>

关键说明 #

• Material 3的mat-menu要求所有菜单内的可交互元素（包括嵌套菜单触发器）必须是mat-menu-item类型，或者嵌套在mat-menu-item中
• 如果需要仅显示图标而无文字，可去掉<span>标签，但mat-menu-item容器不能省略
• 无需额外配置，只要遵循组件的嵌套规则即可解决关闭问题

内容的提问来源于stack exchange，提问作者Imen Sadraoui