使用上下文菜单时的范围问题

Question

我正在关注文档here 将上下文菜单项添加到我的网格中。问题是从 getContextMenuItems 的范围（在示例中），我无法访问组件中的任何其他方法或变量。这可能吗？示例如下：

private varIWantToAccess: boolean = false;

function getContextMenuItems(params) {
    var result = [
    { // custom item
        name: 'Alert ' + params.value,
        action: function () 
    {
        window.alert('Alerting about ' + params.value);
        this.varIWantToAccess = true; // Builds fine, but throws a run time exception, since this "this" context is different than the one that has "varIWantToAccess"
    }
    },
        ....
        return result;
}

谢谢！

Answer 1

我假设您说的是使用 TypeScript 的 Angular 2 或 4 组件。 如果是这样，请使用粗箭头连接到您的函数。

例子：

gridOptions.getContextMenuItems = () => this.getContextMenuItems();

这应该为您提供所需的范围。

Answer 2

您可以在网格的上下文中添加对this 的引用-

this.gridOptions.context = {
                    thisComponent : this
                };

然后，thisComponent 可以访问如下 -

private getContextMenuItems(params) { 
    console.log(params);
    var result = [
        { // custom item
            name: 'Sample',
            action: function () {params.context.thisComponent.callMe();  },
            icon: '<i class="fa fa-pencil" />'
        }];
    return result;
}

对于任何其他回调，例如cellRenderer，也可以这样做。

Answer 3

您需要为项目提供父上下文属性。 示例上下文菜单项：

{
    name: 'BreakoutReport',
    action: function () {
        this.context.isDrillDownData = false;
        this.context.isBreakOutReport = true;
        this.context.populateBreakOutGrid();
    },
    cssClasses: ['redFont', 'bold'],
    disabled: !params.value.drillDownReport,
    context: params.context
}

在这里，this.context 可以访问所有父函数。 请记住，此上下文需要先在网格选项中设置，然后才能转移到上下文菜单项中。

第一步：在gridOptions中设置上下文

 getGridOption() {
     return {
         getContextMenuItems: this.getContextMenu,
         context: this//pass parent context
     };
 }

第二步：将上下文传递给上下文菜单子项

  getContextMenu(params) {
    const result = [
         {
            name: 'Drilldown Report',
            action: function () {
                this.context.populateDrillDownReport();//access parent context using this.context inside the function.
            },
            cssClasses: ['redFont', 'bold'],
            disabled: !params.value.drillDownReport,
            context: params.context//pass parent context
        },
        'separator',
        'copy',
        'copyWithHeaders'];
    return result;
}

Answer 4

你可以修改你的 getContextMenuItems

getContextMenuItems = (params) => {
    var result = [
      {
        name: 'Activate ' + params.value,
        action: function () {
          window.alert('Activated Successfully ');
        },
        cssClasses: ['redFont', 'bold'],
      },
      {
        name: 'Details',
        action: () => {
          this.router.navigate(['container-authorization/listing/distributor-container-store/details']);
        },
        cssClasses: ['redFont', 'bold']
      },
}

如下所示的粗箭头方法。