Angular CDK右键菜单：如何在cdkMenu模板中获取cdkContextmenuTriggerData？

要拿到通过cdkContextMenuTriggerData传递给右键菜单的数据，只需在菜单模板里用*cdkMenuData指令接收即可，具体实现如下：

修改后的完整代码 #

模板代码 #

<ng-template #menu let-data="data">
  <div cdkMenu *cdkMenuData="let data">
    <!-- 直接在模板中使用传递的数据 -->
    <button cdkMenuItem (click)="editItem(data)">Edit {{ data?.title }}</button>
  </div>
</ng-template>

<div [cdkContextMenuTriggerFor]="menu" [cdkContextMenuTriggerData]="variable">Right click on me..</div>

组件类代码（如果需要在逻辑中处理数据） #

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  // 示例传递的数据源
  variable = { title: 'My Item', id: 456 };

  editItem(itemData: any) {
    // 在这里处理传递过来的数据
    console.log('Editing item:', itemData);
  }
}

关键说明 #

• *cdkMenuData="let data"：该指令会把cdkContextMenuTriggerData绑定的数据注入到模板变量data中
• <ng-template #menu let-data="data">：在模板标签上声明变量，确保数据能在整个菜单模板范围内被访问
• 变量名可以自定义，比如把data改成item，只需对应修改let-item="data"和*cdkMenuData="let item"即可

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