Javascript ag grid vue.js：如何访问typescript中渲染器的父网格方法？

我在一个项目中使用ag grid，其中我添加了一个特殊的单元渲染器：

渲染器工作正常，只是我无法访问上面给出的示例中的父网格方法（即，

this.params.context.componentParent.methodFromParent（…）；

）

负责自定义单元渲染和交互的单元渲染器：

模板=>

ActionCellRenderer.vue

：

<template>
  <ag-grid-vue
    ...
    :context="context"
...
></ag-grid-vue>
</template>

撤消取消
你确定吗？
.按钮{
保证金：0；
字体大小：.72rem；
}
.图标{
字体大小：1.3rem；
}

逻辑=>

ActionCellRenderer.ts

：

@组件
导出默认类ActionCellRenderer扩展Vue{
public isAskingForConfirmation=false；
public isconfirm=false；
isPending（）：布尔值{
//@ts忽略
返回this.params.value==“待定”；
}
askForConfirmation（）：void{
//@ts忽略
this.isAskingForConfirmation=true；
//@ts忽略
console.log（this.params）；
window.setTimeout（（）=>{
this.isAskingForConfirmation=false；
}, 3000);
}
确认（）：无效{
警报（“确认！”）；
this.isconfired=true；
}
}

父网格：

模板=>

CashoutRecords.vue

：

<template>
  <ag-grid-vue
    ...
    :context="context"
...
></ag-grid-vue>
</template>

.ag行.ag单元{
显示器：flex；
对齐项目：居中；
}

逻辑=>

CashoutRecords.ts

：

@Component({
    components: {
        AgGridVue,
    },
})
export default class CashoutRecords extends Vue {

    @NS.Action(Actions.fetchCashouts) fetchCashouts!: ActionTypes.fetchCashouts;
    @NS.Action(Actions.fetchCompanies) fetchCompanies!: ActionTypes.fetchCompanies;
    @NS.Getter(Getters.cashoutRecords) cashoutRecords!: GetterTypes.cashoutRecords;

    gridOptions: GridOptions = {
        rowHeight: 45,
    };

    frameworkComponents = {
        actionCellRenderer: ActionCellRenderer,
    };

    columnDefs: ColDef[] = [
        {
            headerName: "",
            filter: true,
            pinned: "right",
            field: "state.name",
            width: 130,
            resizable: true,
            cellRenderer: "actionCellRenderer",
        },
        { headerName: "Date", field: "createdOn", valueFormatter: this.dateTimeFormatter, width: 150, resizable: true },
        { headerName: "Recipient", field: "recipient", resizable: true },
        { headerName: "Amount", field: "amount", valueFormatter: this.currencyFormatter, width: 110, resizable: true },
        { headerName: "Label", field: "comment", resizable: true },
        { headerName: "State", field: "state.name", width: 100, resizable: true },
        { headerName: "Created by", field: "createdBy", resizable: true },
    ];

    defaultColDef = { filter: true };

    private gridApi!: GridApi;

    mounted() {
        if (this.gridOptions.api) {
            this.gridApi = this.gridOptions.api;
        }
    }

    async onGridReady() {
        await this.loadCashoutRecords();
    }

    async loadCashoutRecords() {
        this.gridApi.showLoadingOverlay();
        await Promise.all([
            this.fetchCompanies(),
            this.fetchCashouts(),
        ]);
        if (this.cashoutRecords.length === 0) {
            this.gridApi.showNoRowsOverlay();
        } else {
            this.gridApi.hideOverlay();
        }
    }

    private methodFromParent(cell: any) {
        alert("Parent Component Method from " + cell + "!");
    }

    private currencyFormatter(params: ValueFormatterParams) {
        return toCurrency(params.value);
    }

    private dateTimeFormatter(params: ValueFormatterParams) {
        return toDateTime(params.value);
    }
}

执行

console.log（this.params）时

调用

askForConfirmation

方法时，我看不到任何

context

字段：

Object
$scope = null
addRenderedRowListener = function (eventType, listener) {
addRowCompListener = function () { [native code] }
agGridReact = Object {}
api = GridApi {detailGridInfoMap: , immutableService: , csvCreator: , excelCreator: , gridCore: , ...}
column = Column {moving: false, menuVisible: false, filterActive: false, eventService: , rowGroupActive: false, ...}
columnApi = ColumnApi {columnController: }
colDef = Object {filter: true, headerName: "", pinned: "right", field: "state.name", width: 130, ...}
data = Object {id: 3, recipientAccountId: 456, recipientAccountName: "Samuel L. Jackson", createdOn: "2019-06-10T17:02:00", amount: 666, ...}
eGridCell = div.ag-cell.ag-cell-not-inline-editing.ag-cell-with-height.ag-cell-first-right-pinned.ag-cell-value.ag-column-hover.ag-cell-focus {__AG_0.44240488142399337: , align: "", title: "", lang: "", translate: true, ...}
eParentOfValue = div.ag-cell.ag-cell-not-inline-editing.ag-cell-with-height.ag-cell-first-right-pinned.ag-cell-value.ag-column-hover.ag-cell-focus {__AG_0.44240488142399337: , align: "", title: "", lang: "", translate: true, ...}
formatValue = function () { [native code] }
frameworkComponentWrapper = VueFrameworkComponentWrapper {parent: }
getValue = function () { [native code] }
node = RowNode {childrenMapped: , selectable: true, alreadyRendered: true, selected: false, mainEventService: , ...}
allChildrenCount = null
alreadyRendered = true
canFlower = false
childrenAfterFilter = undefined
childrenMapped = Object {}
childIndex = 2
columnApi = ColumnApi {columnController: }
columnController = ColumnController {primaryHeaderRowCount: 1, secondaryHeaderRowCount: 0, secondaryColumnsPresent: false, gridHeaderRowCount: 1, displayedLeftColumns: , ...}
context = Context {beans: , componentsMappedByName: , destroyed: false, contextParams: , logger: }
data = Object {id: 3, recipientAccountId: 456, recipientAccountName: "Samuel L. Jackson", createdOn: "2019-06-10T17:02:00", amount: 666, ...}
eventService = EventService {allSyncListeners: , allAsyncListeners: , globalSyncListeners: , globalAsyncListeners: , asyncFunctionsQueue: , ...}
expanded = false
firstChild = false
gridApi = GridApi {detailGridInfoMap: , immutableService: , csvCreator: , excelCreator: , gridCore: , ...}
gridOptionsWrapper = GridOptionsWrapper {propertyEventService: , domDataKey: "__AG_0.44240488142399337", layoutElements: , gridOptions: , columnController: , ...}
group = false
id = "2"
lastChild = false
level = 0
mainEventService = EventService {allSyncListeners: , allAsyncListeners: , globalSyncListeners: , globalAsyncListeners: , asyncFunctionsQueue: , ...}
master = false
oldRowTop = undefined
rowHeight = 45
rowIndex = 2
rowModel = ClientSideRowModel {gridOptionsWrapper: , columnController: , filterManager: , $scope: undefined, selectionController: , ...}
rowTop = 90
selectable = true
selected = false
selectionController = SelectionController {eventService: , rowModel: , gridOptionsWrapper: , columnApi: , gridApi: , ...}
uiLevel = 0
valueCache = ValueCache {cacheVersion: 1, gridOptionsWrapper: , active: false, neverExpires: false}
valueService = ValueService {initialised: true, gridOptionsWrapper: , expressionService: , columnController: , eventService: , ...}
__proto__ = Object {setData: , updateDataOnDetailNode: , createDataChangedEvent: , createLocalRowEvent: , updateData: , ...}
refreshCell = function () { [native code] }
rowIndex = 2
setValue = function (value) {
value = "Pending"
valueFormatted = null
__proto__ = Object {constructor: , __defineGetter__: , __defineSetter__: , hasOwnProperty: , __lookupGetter__: , ...}

---

如何从单元格渲染器访问网格方法

methodFromParent

？

好吧，这很简单，我只是忘记声明

上下文和
方法
字段（出于某些原因，我认为有内置的…）

长话短说：

逻辑=>
CashoutRecords.ts
：

@Component({
    components: {
        AgGridVue,
    },
})
export default class CashoutRecords extends Vue {

    @NS.Action(Actions.fetchCashouts) fetchCashouts!: ActionTypes.fetchCashouts;
    @NS.Action(Actions.fetchCompanies) fetchCompanies!: ActionTypes.fetchCompanies;
    @NS.Getter(Getters.cashoutRecords) cashoutRecords!: GetterTypes.cashoutRecords;

    gridOptions: GridOptions = {
        rowHeight: 45,
    };

    frameworkComponents = {
        actionCellRenderer: ActionCellRenderer,
    };

    columnDefs: ColDef[] = [
        {
            headerName: "",
            filter: true,
            pinned: "right",
            field: "state.name",
            width: 130,
            resizable: true,
            cellRenderer: "actionCellRenderer",
        },
        { headerName: "Date", field: "createdOn", valueFormatter: this.dateTimeFormatter, width: 150, resizable: true },
        { headerName: "Recipient", field: "recipient", resizable: true },
        { headerName: "Amount", field: "amount", valueFormatter: this.currencyFormatter, width: 110, resizable: true },
        { headerName: "Label", field: "comment", resizable: true },
        { headerName: "State", field: "state.name", width: 100, resizable: true },
        { headerName: "Created by", field: "createdBy", resizable: true },
    ];

    defaultColDef = { filter: true };

    private gridApi!: GridApi;

    mounted() {
        if (this.gridOptions.api) {
            this.gridApi = this.gridOptions.api;
        }
    }

    async onGridReady() {
        await this.loadCashoutRecords();
    }

    async loadCashoutRecords() {
        this.gridApi.showLoadingOverlay();
        await Promise.all([
            this.fetchCompanies(),
            this.fetchCashouts(),
        ]);
        if (this.cashoutRecords.length === 0) {
            this.gridApi.showNoRowsOverlay();
        } else {
            this.gridApi.hideOverlay();
        }
    }

    private methodFromParent(cell: any) {
        alert("Parent Component Method from " + cell + "!");
    }

    private currencyFormatter(params: ValueFormatterParams) {
        return toCurrency(params.value);
    }

    private dateTimeFormatter(params: ValueFormatterParams) {
        return toDateTime(params.value);
    }
}

context={componentParent:this}；
方法={
async methodFromParent（单元格：任意）{
//…在这里执行
}
};

并在模板中添加对该上下文的引用：

模板=>
CashoutRecords.vue
：

<template>
  <ag-grid-vue
    ...
    :context="context"
...
></ag-grid-vue>
</template>