如何解决Angular Material mat-menu遮挡触发器的问题

这个现象不属于未修复的bug，是 Angular Material 浮层组件的默认定位优先级逻辑导致的：
你配置的[overlapTrigger]="false" [yPosition]="'below'"本身语法没有问题，但这两个配置属于优先定位规则，不是强制约束。当菜单总高度超过「触发器下边缘到视口底部的剩余可用高度」时，浮层定位逻辑会优先保证菜单尽可能完整展示在视口范围内，自动向上偏移菜单位置，最终就会出现遮挡触发器的情况。

• 方案1：限制菜单最大高度（最推荐）
  从根源避免触发自动上移逻辑，保证菜单高度永远不超过触发器下方的可用空间，同时保留菜单内部滚动能力。
  实现时可以动态计算触发器位置，给菜单面板设置匹配可用空间的最大高度：

  <!-- 模板部分 -->
  <button mat-button [matMenuTriggerFor]="longMenu" #menuTrigger="matMenuTrigger" (menuOpened)="adjustMenuHeight()">
    长菜单触发器
  </button>
  <mat-menu #longMenu="matMenu" [overlapTrigger]="false" yPosition="below" panelClass="custom-scroll-menu">
    <!-- 你的菜单项内容 -->
  </mat-menu>
  

  // 组件逻辑部分
  import { ViewChild, Renderer2 } from '@angular/core';
  import { MatMenuTrigger } from '@angular/material/menu';
  
  @ViewChild('menuTrigger') menuTrigger: MatMenuTrigger;
  constructor(private renderer: Renderer2) {}
  
  adjustMenuHeight() {
    const triggerRect = this.menuTrigger.getBoundingClientRect();
    // 预留8px的视觉边距，计算触发器下方到视口底部的可用高度
    const availableMaxHeight = window.innerHeight - triggerRect.bottom - 8;
    const menuPanel = document.querySelector('.custom-scroll-menu') as HTMLElement;
    if (menuPanel) {
      this.renderer.setStyle(menuPanel, 'maxHeight', `${availableMaxHeight}px`);
    }
  }
  

  /* 样式部分 */
  .custom-scroll-menu {
    overflow-y: auto !important;
  }
  

• 方案2：强制固定菜单定位方向
  如果不需要自动适配视口边界，可以自定义浮层定位策略，关闭自动翻转上移的逻辑，强制菜单永远显示在触发器下方：

  // 在组件或模块中配置自定义菜单默认选项
  import { MAT_MENU_DEFAULT_OPTIONS } from '@angular/material/menu';
  
  providers: [
    {
      provide: MAT_MENU_DEFAULT_OPTIONS,
      useValue: {
        overlapTrigger: false,
        yPosition: 'below',
        // 只保留下方定位规则，移除自动翻转到触发器上方的定位配置
        positions: [
          {
            originX: 'start',
            originY: 'bottom',
            overlayX: 'start',
            overlayY: 'top',
            offsetY: 8
          }
        ]
      }
    }
  ]
  

  这个方案的缺点是如果菜单高度超过视口剩余空间，菜单底部会超出视口，需要滚动页面才能看到全部菜单项。

• 方案3：升级Angular Material版本
  15及以上版本的Material调整了定位优先级：当显式设置overlapTrigger: false时，会优先保证不覆盖触发器，只有当触发器上下方的空间都不足以容纳最小高度的菜单时，才会触发重叠逻辑，大部分场景下不需要额外自定义配置就能解决问题。

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