如何使用上下文菜单自定义从 ag-grid 打开模态对话框

Question

我发现代码有问题。我试图通过右键单击单元格然后显示菜单自定义（例如查看详细信息、编辑数据和删除）来在 Angular ag-grid 中进行菜单自定义。当我单击编辑时，会出现组件对话框，但显然不会出现模式对话框，因为编码有问题，请帮忙。

数据.组件.ts

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

// costume menu
getContextMenuItems(
    params: GetContextMenuItemsParams
): (string | MenuItemDef)[] {
    var result: (string | MenuItemDef)[] = [
        {
            // custom item
            name: 'Edit Data',
            action: () => {
               this.openComposeDialog()
            },
        },
    ];
    return result;
}

以下是错误显示

core.mjs:7643 ERROR TypeError: Cannot read properties of undefined (reading 'openComposeDialog')
at Object.action (kandidat.component.ts:424:26)
at AgMenuItemComponent.onItemSelected (ag-grid-community.auto.esm.js:41776:25)
at HTMLDivElement.<anonymous> (ag-grid-community.auto.esm.js:41589:75)
at ZoneDelegate.invokeTask (zone.js:406:31)
at Object.onInvokeTask (core.mjs:26278:33)
at ZoneDelegate.invokeTask (zone.js:405:60)
at Zone.runTask (zone.js:178:47)
at ZoneTask.invokeTask [as invoke] (zone.js:487:34)
at invokeTask (zone.js:1600:14)
at HTMLDivElement.globalZoneAwareCallback (zone.js:1626:17)

Answer 1

在这种情况下，openComposeDialog() 超出了范围，要解决此问题，您可以将组件父级添加到 GridOptions 上下文，如下所示：

   gridOptions: GridOptions = ({
   context: {
     componentParent: this
   }, ...})

然后就可以通过getContextMenuItems()中的params.context来访问

getContextMenuItems(
    params: GetContextMenuItemsParams
): (string | MenuItemDef)[] {
    var result: (string | MenuItemDef)[] = [
        {
            // custom item
            name: 'Edit Data',
            action: () => {
               const ctx = params.context.componentParent as <ComponentName>;
               ctx.openComposeDialog()
            },
        },
    ];
    return result;
}