Angular CdkMenuModule自定义右键菜单位置异常问题求助

1. 确认导入完整的CDK依赖模块 #

CDK菜单的定位依赖Overlay服务，且动画模块是基础依赖，必须在AppModule中同时导入：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CdkMenuModule } from '@angular/cdk/menu';
import { OverlayModule } from '@angular/cdk/overlay';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    CdkMenuModule,
    OverlayModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 实现右键触发的定位逻辑 #

官网示例默认是点击触发，右键菜单需要手动监听contextmenu事件，阻止浏览器默认行为后，指定菜单打开的鼠标坐标：
在app.component.ts中：

import { Component, ViewChild } from '@angular/core';
import { CdkMenuTrigger, CdkMenu } from '@angular/cdk/menu';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @ViewChild(CdkMenuTrigger) trigger!: CdkMenuTrigger;
  @ViewChild('menu') menu!: CdkMenu;

  openContextMenu(event: MouseEvent) {
    event.preventDefault();
    this.trigger.openMenuAt({ x: event.clientX, y: event.clientY });
  }
}

对应的app.component.html：

<!-- 绑定右键触发的目标元素 -->
<div (contextmenu)="openContextMenu($event)" style="width: 600px; height: 400px; border: 1px solid #eee; margin: 20px;">
  右键点击此区域打开自定义菜单
</div>

<!-- 定义菜单结构 -->
<div cdkMenu #menu="cdkMenu">
  <button cdkMenuItem>复制</button>
  <button cdkMenuItem>粘贴</button>
  <button cdkMenuItem>删除</button>
</div>

<!-- 隐藏的触发器，用于绑定菜单 -->
<div [cdkMenuTriggerFor]="menu" #trigger="cdkMenuTrigger" style="display: none;"></div>

3. 排查全局样式冲突 #

检查styles.scss是否存在干扰CDK定位的样式，比如不要给html/body设置position: fixed、overflow: hidden等属性，保持基础全局样式简洁：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

4. 对齐Angular与CDK版本 #

你的Angular CLI是15.2.4，CDK版本为15.2.5，主版本一致无问题，若仍有异常，可重新安装完全匹配的版本：

npm install @angular/cdk@15.2.4 --save

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