コンテキストメニューを使用してスコープを設定する

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を使用して角度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

アイテムに親コンテキストプロパティを提供する必要があります。 サンプルコンテキストメニュー項目：

{名： 'BreakoutReport' アクション：関数（）{ this.context.isDrillDownData = FALSE; this.context.isBreakOutReport = true; this.context.populateBreakOutGrid（）; }、 cssClasses：[ 'redFont'、 '太字']、 無効：！params.value.drillDownReport、 コンテキスト：params.context }ここで

、this.contextは、すべての親機能へのアクセスを持っています。 このコンテキストは、まずグリッドオプションで設定してから、コンテキストメニュー項目に転送する必要があります。

第一ステップ：gridOptionsで設定コンテキスト

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

第二ステップ：これは実際にAG-グリッドに関連していないコンテキストメニューのサブ項目に

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; 
}