Angular13中AG-Grid Enterprise自定义通用菜单回调失效问题

在AG-Grid Enterprise自定义菜单时，直接将action指向组件方法会出现静默错误，使用普通函数则无法访问组件的this或依赖注入服务——核心原因是AG-Grid执行action时会改变函数的执行上下文，导致this指向丢失。以下是几种可行的解决方法：

方法1：用箭头函数包裹组件方法 #

箭头函数不会创建自身的this上下文，会继承外层的组件实例上下文，确保能正确访问组件属性和服务：

const athleteMenuItems: (MenuItemDef | string)[] = params.defaultItems.slice(0);
athleteMenuItems.push({
  name: 'AG Grid Is Great',
  action: () => {
    // 此处this指向组件实例，可正常调用组件方法或访问服务
    this.handleMenuClick();
  },
});

方法2：使用bind绑定组件上下文 #

通过bind方法将函数的this固定为组件实例，避免AG-Grid调用时上下文被替换：

const athleteMenuItems: (MenuItemDef | string)[] = params.defaultItems.slice(0);
athleteMenuItems.push({
  name: 'AG Grid Is Great',
  action: this.handleMenuClick.bind(this),
});

方法3：提前保存组件上下文到变量 #

如果需要使用普通函数（比如兼容旧代码场景），可以先将组件实例保存到变量中，在函数内部通过该变量访问组件上下文：

const self = this; // 缓存组件实例
const athleteMenuItems: (MenuItemDef | string)[] = params.defaultItems.slice(0);
athleteMenuItems.push({
  name: 'AG Grid Is Great',
  action: function() {
    self.handleMenuClick(); // 通过self访问组件实例
  },
});

补充说明 #

如果组件方法需要接收AG-Grid的参数（比如菜单点击对应的行数据），可以在箭头函数中传递：

action: () => {
  const rowData = params.node.data;
  this.handleMenuClick(rowData);
}

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