如何让Angular Material的MatMenu组件position-bounding-box固定在按钮下方？

要让Angular Material的MatMenu固定在按钮下方，不受视口空间影响自动切换位置，可以通过以下几种方式实现：

方法一：自定义位置策略（PositionStrategy） #

通过自定义PositionStrategy，强制菜单使用固定的下方位置，并锁定位置不自动调整：

1. 创建自定义位置策略类：

import { PositionStrategy, ConnectedPosition, OverlayRef, Observable } from '@angular/cdk/overlay';

class FixedBelowPositionStrategy implements PositionStrategy {
  constructor(private overlayRef: OverlayRef) {}

  apply(): void {
    const fixedPosition: ConnectedPosition[] = [
      {
        originX: 'start',
        originY: 'bottom',
        overlayX: 'start',
        overlayY: 'top',
        offsetY: 8 // 菜单与按钮的间距，可自行调整
      }
    ];

    this.overlayRef.updatePositionStrategy(
      this.overlayRef.position()
        .connectedTo(this.overlayRef.getOriginElement(), fixedPosition)
        .withLockedPosition() // 锁定位置，禁止自动切换到上方
    );
  }

  // 实现接口要求的其他方法
  attach(): void {}
  detach(): void {}
  dispose(): void {}
  onPositionChange(): Observable<any> {
    return new Observable();
  }
}

2. 在组件中使用该策略打开菜单：

import { Component, ViewChild } from '@angular/core';
import { MatMenuTrigger } from '@angular/material/menu';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @ViewChild(MatMenuTrigger) menuTrigger!: MatMenuTrigger;

  openFixedMenu() {
    const overlayRef = this.menuTrigger.overlayRef;
    const fixedStrategy = new FixedBelowPositionStrategy(overlayRef);
    fixedStrategy.apply();
    this.menuTrigger.openMenu();
  }
}

3. 模板中绑定自定义打开方法：

<button mat-button (click)="openFixedMenu()">打开固定位置菜单</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>选项1</button>
  <button mat-menu-item>选项2</button>
  <button mat-menu-item>选项3</button>
</mat-menu>

方法二：修改默认位置配置并锁定位置 #

利用MatMenu的positions属性指定固定位置，再通过withLockedPosition()禁止自动调整：

1. 组件中定义固定位置数组：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatMenuTrigger } from '@angular/material/menu';
import { ConnectedPosition } from '@angular/cdk/overlay';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  @ViewChild(MatMenuTrigger) menuTrigger!: MatMenuTrigger;
  
  fixedMenuPositions: ConnectedPosition[] = [
    {
      originX: 'start',
      originY: 'bottom',
      overlayX: 'start',
      overlayY: 'top',
      offsetY: 8
    }
  ];

  ngAfterViewInit() {
    // 菜单打开后锁定位置
    this.menuTrigger.menuOpened.subscribe(() => {
      this.menuTrigger.overlayRef?.updatePositionStrategy(
        this.menuTrigger.overlayRef.position().withLockedPosition()
      );
    });
  }
}

2. 模板中绑定位置配置：

<button mat-button [matMenuTriggerFor]="menu">打开菜单</button>
<mat-menu #menu="matMenu" [positions]="fixedMenuPositions" [overlapTrigger]="false">
  <button mat-menu-item>选项1</button>
  <button mat-menu-item>选项2</button>
</mat-menu>

方法三：CSS强制定位 #

如果上述方法不适用，可以通过CSS强制菜单位置，配合JS获取触发按钮的坐标：

1. 添加全局或组件级CSS：

.mat-menu-panel {
  position: fixed !important;
  top: calc(var(--trigger-bottom) + 8px) !important;
  left: var(--trigger-left) !important;
  transform: none !important;
}

2. 组件中获取按钮位置并设置CSS变量：

import { Component, ViewChild } from '@angular/core';
import { MatMenuTrigger } from '@angular/material/menu';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styles: [`.mat-menu-panel { ... }`] // 或者写在全局样式文件
})
export class YourComponent {
  @ViewChild(MatMenuTrigger) menuTrigger!: MatMenuTrigger;

  openMenu() {
    const triggerEl = this.menuTrigger.elementRef.nativeElement;
    const rect = triggerEl.getBoundingClientRect();
    
    // 设置CSS变量
    document.documentElement.style.setProperty('--trigger-bottom', `${rect.bottom}px`);
    document.documentElement.style.setProperty('--trigger-left', `${rect.left}px`);
    
    this.menuTrigger.openMenu();
  }
}

注意事项 #

• 使用withLockedPosition()后，菜单可能会超出视口范围，需要自行处理滚动或溢出显示逻辑
• 不同Angular Material版本的API可能存在细微差异，请根据使用版本调整代码
• 自定义位置策略时，需确保实现PositionStrategy接口的所有必要方法

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