Angular中动态生成嵌套Mat-Menu的问题及解决需求

问题根源 #

1. 父菜单消失：点击带子菜单的菜单项时，默认会触发父菜单的关闭事件，导致父菜单被自动隐藏。
2. 无箭头指示：未触发Angular Material内置的箭头样式，或项目缺失Material主题样式文件。

解决方案 #

1. 阻止父菜单关闭

给绑定了子菜单的mat-menu-item按钮添加(click)="$event.stopPropagation()"，阻止点击事件冒泡到父菜单，避免父菜单被误关闭。

2. 确保箭头样式生效

Angular Material会自动为绑定[matMenuTriggerFor]的mat-menu-item添加箭头图标，只需满足两个条件：

• 触发器按钮必须使用mat-menu-item组件
• 项目已导入Angular Material主题样式（如在styles.scss中添加@import '@angular/material/prebuilt-themes/indigo-pink.css';）

修改后的完整代码 #

接口定义（保持不变）

export interface MenuItem {
  name: string;
  children?: MenuItem[];
}

HTML模板

<!-- 根菜单触发器按钮 -->
<button mat-button [matMenuTriggerFor]="groupeSubMenu">
  {{ menuItems.name }}
</button>
<mat-menu #groupeSubMenu="matMenu">
  <ng-container
    *ngTemplateOutlet="recursiveMenu; context: { children: menuItems.children }"
  ></ng-container>
</mat-menu>

<!-- 递归生成菜单的模板 -->
<ng-template #recursiveMenu let-children="children">
  <ng-container *ngFor="let child of children">
    <ng-container
      *ngIf="child.children && child.children.length > 0; else terminal"
    >
      <!-- 添加stopPropagation阻止父菜单关闭 -->
      <button mat-menu-item [matMenuTriggerFor]="childMenu" (click)="$event.stopPropagation()">
        {{ child.name }}
      </button>
      <!-- 设置overlapTrigger让子菜单在父菜单右侧显示，与官网示例布局一致 -->
      <mat-menu #childMenu="matMenu" [overlapTrigger]="false">
        <ng-container
          *ngTemplateOutlet="recursiveMenu; context: { children: child.children }"
        ></ng-container>
      </mat-menu>
    </ng-container>
    <ng-template #terminal>
      <button mat-menu-item>{{ child.name }}</button>
    </ng-template>
  </ng-container>
</ng-template>

额外提示 #

• [overlapTrigger]="false"是可选配置，用于让子菜单在父菜单右侧展开，完全复刻官网示例的布局效果。
• 若箭头仍不显示，可通过浏览器开发者工具检查是否有自定义样式覆盖了Material的默认箭头样式，针对性调整即可。

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