Angular 14中如何为Material表格行添加右键上下文菜单？

针对你遇到的版本不匹配、组件混用报错问题，这里提供两种可靠的实现方式，帮你避开坑点：

方案一：纯Material菜单+原生右键事件（推荐） #

无需依赖CDK菜单模块，用原生右键事件配合Material菜单实现，逻辑直观且避免版本冲突：

1. 调整模板结构 #

去掉mat-menu内多余的<ng-template>，直接定义菜单选项；给表格行绑定右键事件：

<!-- 定义Material菜单 -->
<mat-menu #contextMenu="matMenu">
  <button mat-menu-item (click)="handleAction('D', selectedRow)">D</button>
  <button mat-menu-item (click)="handleAction('C', selectedRow)">C</button>
  <button mat-menu-item (click)="handleAction('B', selectedRow)">B</button>
  <button mat-menu-item (click)="handleAction('A', selectedRow)">A</button>
</mat-menu>

<!-- Material表格 -->
<table mat-table [dataSource]="dataSource">
  <!-- 你的列定义（省略） -->
  <tr 
    mat-row 
    *matRowDef="let row; columns: displayedColumns"
    (contextmenu)="onRowRightClick($event, row)"
  ></tr>
</table>

2. 组件类处理逻辑 #

获取菜单实例，阻止浏览器默认右键菜单，手动定位并打开菜单，同时记录当前选中行：

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

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @ViewChild('contextMenu') contextMenu!: MatMenu;
  selectedRow: any;

  onRowRightClick(event: MouseEvent, row: any) {
    event.preventDefault(); // 屏蔽浏览器默认右键菜单
    this.selectedRow = row;
    // 按鼠标位置打开菜单
    this.contextMenu.openMenu({
      x: event.clientX,
      y: event.clientY
    });
  }

  handleAction(action: string, row: any) {
    // 这里写你的操作逻辑，比如编辑、删除行
    console.log(`执行${action}操作，行数据：`, row);
  }
}

方案二：正确使用CDK上下文菜单（需版本匹配） #

如果一定要用CDK的上下文菜单能力，必须保证版本一致，且不能混用Material菜单和CDK触发器：

1. 确保版本统一 #

Angular 14必须配套CDK 14.x，执行命令升级：

npm install @angular/cdk@14.2.x --save

2. 导入CDK菜单模块 #

在你的组件所属模块中导入CdkMenuModule：

import { CdkMenuModule } from '@angular/cdk/menu';

@NgModule({
  imports: [
    // 其他已导入模块
    CdkMenuModule
  ]
})
export class YourModule { }

3. 模板使用CDK菜单组件 #

用CDK原生的菜单组件替代Material的mat-menu，并正确绑定触发器：

<!-- CDK上下文菜单模板 -->
<ng-template #contextMenu>
  <div cdk-menu>
    <button cdk-menu-item (click)="handleAction('D', selectedRow)">D</button>
    <button cdk-menu-item (click)="handleAction('C', selectedRow)">C</button>
    <button cdk-menu-item (click)="handleAction('B', selectedRow)">B</button>
    <button cdk-menu-item (click)="handleAction('A', selectedRow)">A</button>
  </div>
</ng-template>

<!-- Material表格 -->
<table mat-table [dataSource]="dataSource">
  <tr 
    mat-row 
    *matRowDef="let row; columns: displayedColumns"
    [cdkContextMenuTriggerFor]="contextMenu"
    (contextMenuOpened)="selectedRow = row"
  ></tr>
</table>

4. 组件类处理操作 #

和方案一类似，只需定义选中行和操作处理函数即可：

import { Component } from '@angular/core';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  selectedRow: any;

  handleAction(action: string, row: any) {
    console.log(`执行${action}操作，行数据：`, row);
  }
}

你之前遇到问题的原因 #

1. 组件混用错误：CDK的cdkContextMenuTriggerFor只能配合CDK自己的菜单组件，不能和Material的mat-menu混用，这是核心冲突点。
2. 版本不匹配：Angular 14必须对应CDK 14，CDK 13本身没有菜单模块，强行升级后因组件混用导致表格渲染报错。

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