Angular 13升级后ngx-contextmenu失效及connectedTo报错求助

架构老林

2026-8-1

解决方案

1. 替换弃用的`ClientRect`为`DOMRect`

TypeScript 4.x 已废弃ClientRect，官方推荐用DOMRect替代，先修改类型定义：

const offset = this.getOffset(this.divElement.nativeElement);
const anchorElement: any = {};
anchorElement.getBoundingClientRect = (): DOMRect => ({
  bottom: offset.top + $event.clientY,
  height: 0,
  left: offset.left + $event.clientX,
  right: offset.left + $event.clientX,
  top: offset.top + $event.clientY,
  width: 0
});

2. 适配Angular CDK Overlay新API（解决`connectedTo`报错）

Angular 13升级后，配套的CDK版本更新了Overlay的位置配置逻辑，connectedTo API已被移除，改用flexibleConnectedTo，有两种处理方式：

选项A：升级ngx-contextmenu到兼容版本

直接把ngx-contextmenu升级到支持Angular 13的版本（比如^13.x.x），执行命令：

npm install ngx-contextmenu@^13.1.0 --save

升级后依赖本身会适配新API，无需手动修改代码。

选项B：手动修改位置配置代码

如果暂时不能升级依赖，需要调整上下文菜单的触发逻辑，把connectedTo替换为flexibleConnectedTo：

// 原配置示例
// this.overlay.position()
//   .connectedTo(anchorElement, { originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'top' });

// 修改后的配置
this.overlay.position()
  .flexibleConnectedTo(anchorElement)
  .withPositions([{
    originX: 'start',
    originY: 'top',
    overlayX: 'start',
    overlayY: 'top'
  }]);