如何为CDK Menu设置触发元素偏移？CDK Overlay支持cdkConnectedOverlayOffsetY

当然可以实现类似CDK Overlay的偏移效果，以下是几种可行方案：

• 通过overlayConfig直接配置定位偏移
  CDK Menu的CdkMenuTrigger支持传入自定义的OverlayConfig，你可以在其中定义包含偏移的定位策略：

  import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
  import { Component, ViewChild, ElementRef } from '@angular/core';
  
  @Component({
    selector: 'app-menu-example',
    template: `
      <button #triggerBtn [cdkMenuTriggerFor]="menu" [overlayConfig]="menuOverlayConfig">
        打开菜单
      </button>
      <ng-template #menu>
        <div cdkMenu>
          <button cdkMenuItem>选项1</button>
          <button cdkMenuItem>选项2</button>
        </div>
      </ng-template>
    `
  })
  export class MenuExampleComponent {
    @ViewChild('triggerBtn') triggerBtn!: ElementRef;
    menuOverlayConfig: OverlayConfig;
  
    constructor(private overlay: Overlay) {
      this.menuOverlayConfig = {
        positionStrategy: this.overlay.position()
          .flexibleConnectedTo(this.triggerBtn)
          .withPositions([{
            originX: 'start',
            originY: 'bottom',
            overlayX: 'start',
            overlayY: 'top',
            offsetY: 8 // 设置Y轴方向的偏移量
          }])
      };
    }
  }
  

• 通过CSS调整菜单位置
  直接给菜单容器添加自定义样式，强制调整偏移：

  .custom-menu-offset {
    margin-top: 12px !important; /* Y轴偏移 */
    margin-left: -4px !important; /* X轴偏移 */
  }
  

  模板中为菜单绑定类名：

  <ng-template #menu>
    <div cdkMenu class="custom-menu-offset">
      <button cdkMenuItem>选项1</button>
      <button cdkMenuItem>选项2</button>
    </div>
  </ng-template>
  

• 自定义MenuTrigger扩展偏移逻辑
  如果需要更灵活的参数控制（比如像cdkConnectedOverlayOffsetY那样直接绑定属性），可以继承CdkMenuTrigger类，重写其定位策略的创建逻辑，暴露自定义的偏移输入属性。

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