Отправить событие из cellRendererFramework в родительский
С помощью ag-grid вы можете определить свой GridOptions.columnDefs с помощью информации столбца, включая cellRendererFramework. У меня есть компонент, который я использую для cellRendererFramework, который включает событие, которое запускается при нажатии кнопки в его шаблоне. Я хотел бы иметь возможность передать это событие родителю (где определяются columnDefs и откуда инициализируется ag-grid-angular).
Я вижу, что я мог бы просто позволить событию пройти через событие ag-grid-angular's cellClicked... а затем я мог бы просмотреть событие, чтобы проанализировать информацию, такую как цель события, и посмотреть, находится ли оно на кнопке и т. д.... но я Я надеюсь, что мне не придется этого делать, и что есть способ получить событие из компонента cellRendererFramework ts, up.
Мой GridOption.columnDefs def для этой колонки выглядит так:
{
headerName: 'Actions',
cellRendererFramework: ActionCellComponent,
suppressFilter: true,
}
ActionCellComponent имеет шаблон с кнопками, которые имеют события нажатия, такие как (click) = "actions.deleteSchema($event)", и подбираются в компоненте ts.
Я надеюсь получить события от ActionCellComponent к AdminComponent, в котором размещены ag-grid и columnDefs, без необходимости анализировать событие cellClicked.
Ответы 1
У меня была проблема с поиском чистого способа сделать это. Вы можете использовать это, чтобы получить ссылку на родительский компонент, который инициализировал cellRenderer.
import {GridOptions} from "ag-grid";
constructor(){
this.gridOptions = <GridOptions>{
context: {
componentParent: this
}
};
}
Убедитесь, что при рисовании сетки в HTML
<ag-grid-angular #grid-reference [gridOptions] = "gridOptions">
Затем в свой cellRenderer включите agInit, который будет срабатывать при отрисовке класса.
public params;
public agInit(params: any): void {
this.params = params;
console.info(this.params.context.componentParent);
// access to parent functions / variables etc
}
Итак, например, после события, если у вас есть public hello: string в родительском элементе, вы можете сделать следующее ниже.
this.params.context.componentParent.hello = "hi"; // could be function call.
Затем это должно позволить вам делать то, что вам нужно, для взаимодействия между ними. Контекст привязан.
Надеюсь, это то, что вы ищете.
Вот документация ag-grid.
Да, вероятно, есть и другие способы, это сработало для меня, поэтому я решил поделиться :-)
Это именно то решение, которое я искал. Спасибо, что поделились!
Совершенно никаких проблем :-)
Это здорово! Вы сэкономили мне часы... на самом деле, я бы, наверное, сдался.
рад, что это все еще удобно несколько лет спустя :-)
идеально, немного отличается от того, как я думал .. но делает то, что мне нужно. Спасибо