Angular ag-grid自定义右键菜单打开模态框报错求助

问题根源 #

错误TypeError: Cannot read properties of undefined (reading 'openComposeDialog')的核心原因是**this指向错误**：AG-Grid在调用自定义菜单的getContextMenuItems方法时，会改变this的指向，导致方法内部的this不再指向组件实例，进而箭头函数里的this也无法访问组件的openComposeDialog方法和注入的_matDialog。

解决方案 #

方案1：用箭头函数定义getContextMenuItems方法 #

将组件的getContextMenuItems方法定义为箭头函数，确保它的this始终绑定到组件实例：

// data.component.ts
openComposeDialog(): void {
    const dialogRef = this._matDialog.open(MailboxComposeComponent, { disableClose: true });
    dialogRef.afterClosed()
        .subscribe((result) => {
            console.log('Compose dialog was closed!');
        });
}

// 用箭头函数定义方法，绑定this到组件实例
getContextMenuItems = (params: GetContextMenuItemsParams): (string | MenuItemDef)[] => {
    const result: (string | MenuItemDef)[] = [
        {
            name: 'Edit Data',
            action: () => {
               this.openComposeDialog();
            },
        },
    ];
    return result;
}

方案2：在方法内部保存组件的this引用 #

如果保持方法的普通函数形式，可以在getContextMenuItems内部先把组件的this存为变量，后续在action里使用这个变量：

// data.component.ts
openComposeDialog(): void {
    const dialogRef = this._matDialog.open(MailboxComposeComponent, { disableClose: true });
    dialogRef.afterClosed()
        .subscribe((result) => {
            console.log('Compose dialog was closed!');
        });
}

getContextMenuItems(params: GetContextMenuItemsParams): (string | MenuItemDef)[] {
    // 保存组件的this引用
    const componentThis = this;
    const result: (string | MenuItemDef)[] = [
        {
            name: 'Edit Data',
            action: () => {
               componentThis.openComposeDialog();
            },
        },
    ];
    return result;
}

方案3：在组件初始化时绑定this #

在组件的ngOnInit钩子中，手动将getContextMenuItems的this绑定到组件实例：

// data.component.ts
ngOnInit(): void {
    // 绑定this到组件实例
    this.getContextMenuItems = this.getContextMenuItems.bind(this);
}

openComposeDialog(): void {
    const dialogRef = this._matDialog.open(MailboxComposeComponent, { disableClose: true });
    dialogRef.afterClosed()
        .subscribe((result) => {
            console.log('Compose dialog was closed!');
        });
}

getContextMenuItems(params: GetContextMenuItemsParams): (string | MenuItemDef)[] {
    const result: (string | MenuItemDef)[] = [
        {
            name: 'Edit Data',
            action: () => {
               this.openComposeDialog();
            },
        },
    ];
    return result;
}

额外检查 #

确保你已经在组件构造函数中正确注入了MatDialog：

constructor(private _matDialog: MatDialog) {}

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