Angular Material中如何将mat-menu定位在触发按钮上方？

没问题，我来帮你搞定这个定位问题！默认情况下Angular Material的mat-menu会根据屏幕空间自动调整位置，所以才会出现位置不符合预期的情况，咱们可以通过两种方式来实现精准定位：

方式一：使用内置属性快速配置 #

这是最简单的方法，直接在触发按钮上添加几个属性就能搞定：

<button 
  (mouseover)="createMenuTrigger.openMenu()" 
  #createMenuTrigger="matMenuTrigger" 
  [matMenuTriggerFor]="createPlan"
  matMenuPositionY="above"  <!-- 指定菜单显示在按钮上方 -->
  matMenuPositionX="center" <!-- 让菜单水平居中对齐按钮 -->
  [overlapTrigger]="false"  <!-- 禁止菜单和触发按钮重叠 -->
> 
  OnHover 
</button>

<mat-menu #createPlan="matMenu">
  <button>Menu1</button>
  <button>Menu2</button>
</mat-menu>

如果菜单和按钮之间还有细微的间隙或者重叠，你可以给mat-menu加个自定义样式调整：

/* 在组件的样式文件中添加，若使用默认ViewEncapsulation，可通过::ng-deep实现样式穿透 */
::ng-deep .mat-menu-panel {
  margin-top: -4px; /* 根据你的实际UI调整这个值，让菜单刚好贴合按钮顶部 */
}

方式二：自定义位置策略（更精准控制） #

如果内置属性满足不了你的需求，咱们可以用Angular CDK的ConnectedPosition来定义完全自定义的位置关系：

首先在组件的TS文件中导入并定义位置数组：

import { Component } from '@angular/core';
import { ConnectedPosition } from '@angular/cdk/overlay';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 定义菜单的精准位置
  menuPositions: ConnectedPosition[] = [
    {
      originX: 'center',       // 触发按钮的水平中心点
      originY: 'top',          // 触发按钮的顶部边缘
      overlayX: 'center',      // 菜单的水平中心点和按钮对齐
      overlayY: 'bottom',      // 菜单的底部边缘和按钮的顶部边缘对齐
      offsetY: -8              // 调整垂直偏移，让菜单刚好在按钮正上方（根据实际情况微调）
    }
  ];
}

然后在模板中把这个位置数组绑定到matMenuTrigger上：

<button 
  (mouseover)="createMenuTrigger.openMenu()" 
  #createMenuTrigger="matMenuTrigger" 
  [matMenuTriggerFor]="createPlan"
  [positions]="menuPositions"  <!-- 绑定自定义位置策略 -->
> 
  OnHover 
</button>

<mat-menu #createPlan="matMenu">
  <button>Menu1</button>
  <button>Menu2</button>
</mat-menu>

别忘了要在你的模块中导入OverlayModule（因为ConnectedPosition来自Angular CDK的Overlay模块）：

import { OverlayModule } from '@angular/cdk/overlay';
import { MatMenuModule } from '@angular/material/menu';

@NgModule({
  imports: [
    // ...其他模块
    MatMenuModule,
    OverlayModule
  ]
})
export class YourModule { }

这样就能让菜单精准地显示在触发按钮的正上方啦！你可以根据自己的UI风格微调偏移量，直到达到满意的效果。

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