Angular中mat-menu组件自定义：如何将子菜单箭头置于文字左侧

嗨，当然可以自定义 Angular Material 的 mat-menu 组件啦！针对你想把子菜单箭头移到文字左侧的需求，咱们不需要修改组件源码，通过自定义 CSS 就能轻松实现，下面是具体的步骤：

步骤1：给带子菜单的按钮标记自定义类 #

首先，给所有包含子菜单的 mat-menu-item 按钮添加一个自定义类（比如 has-submenu），方便我们精准定位样式：

<span class="material-symbols-outlined cursor-pointer" [matMenuTriggerFor]="settings"> settings </span>
<mat-menu #settings="matMenu" xPosition="before">
  <!-- 给带子菜单的按钮添加自定义类 -->
  <button mat-menu-item [matMenuTriggerFor]="candidats" class="has-submenu">Candidats</button>
  <button mat-menu-item [matMenuTriggerFor]="clients" class="has-submenu">Clients</button>
  <button mat-menu-item [matMenuTriggerFor]="permanents" class="has-submenu">Permanents</button>
  
  <mat-menu #candidats xPosition="before">
    <button mat-menu-item>Candidats</button>
    <button mat-menu-item>Clients</button>
  </mat-menu>
  <mat-menu #clients xPosition="before">
    <button mat-menu-item>Candidats</button>
    <button mat-menu-item>Clients</button>
  </mat-menu>
  <mat-menu #permanents xPosition="before">
    <button mat-menu-item>Candidats</button>
    <button mat-menu-item>Clients</button>
  </mat-menu>
</mat-menu>

步骤2：编写自定义 CSS 调整箭头位置 #

接下来，通过 CSS 调整箭头的布局和方向。这里提供两种方案，你可以根据自己的需求选择：

方案一：使用 Flex Order 属性（推荐） #

这种方法不会打乱按钮整体布局，只是单独调整箭头的排列顺序：

/* 针对带子菜单的按钮，保证flex布局对齐 */
::ng-deep .mat-menu-item.has-submenu {
  display: flex;
  align-items: center;
}

/* 把箭头的排列顺序设为最前 */
::ng-deep .mat-menu-item.has-submenu .mat-menu-submenu-icon {
  order: -1;
  /* 反转箭头方向，让它指向左侧（因为子菜单在左边） */
  transform: rotate(180deg);
  /* 给箭头和文字之间加一点间距，提升视觉体验 */
  margin-right: 8px;
}

方案二：反转 Flex 布局方向 #

如果需要整体反转按钮内元素的排列顺序，可以用这个方案：

::ng-deep .mat-menu-item.has-submenu {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

/* 反转箭头方向，保证指向子菜单 */
::ng-deep .mat-menu-item.has-submenu .mat-menu-submenu-icon {
  transform: rotate(180deg);
}

注意事项 #

• 如果你在组件样式中使用了 ::ng-deep，需要确保组件的视图封装模式不是 ViewEncapsulation.None（默认是 Emulated，可以正常使用）；
• 如果你不想用 ::ng-deep，可以把这些样式放到全局样式文件（比如 styles.scss/styles.css）中，这样就不需要穿透视图封装了；
• 调整箭头方向是因为你设置了 xPosition="before"，子菜单出现在父菜单左侧，所以箭头需要指向左，默认箭头是指向右的，反转180度就符合需求了。

这样调整后，子菜单的箭头就会乖乖跑到文字左侧啦！

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