Emit Event от cellRendererFramework к родителю - PullRequest
Новая
       13

Emit Event от cellRendererFramework к родителю

1 голос
/ 02 мая 2019

С помощью ag-grid вы можете определить свой GridOptions.columnDefs с информацией о столбцах, включая cellRendererFramework. У меня есть компонент, который я использую для cellRendererFramework, который включает в себя событие, которое вызывается нажатием на кнопку в его шаблоне. Я хотел бы иметь возможность передать это событие родителю (где определяются columnDefs и откуда инициализируется ag-grid-angular).

Я вижу, что могу просто позволить событию пройти через ag-grid-angular cellClicked событие ... и затем я могу посмотреть на событие, чтобы проанализировать информацию, такую ​​как цель события, и посмотреть, находится ли она на кнопке. и т. д. ... но я надеюсь, что мне не нужно этого делать, и что есть способ получить событие от cellRendererFramework компонента ts, вверх.

Мой GridOption.columnDefs def для этого столбца выглядит так: 

{
  headerName: 'Actions',
  cellRendererFramework: ActionCellComponent,
  suppressFilter: true,
}

ActionCellComponent имеет шаблон с кнопками, которые имеют события нажатия, такие как (click)="actions.deleteSchema($event)", и выбираются в компоненте ts.

Я надеюсь получить события от ActionCellComponent до AdminComponent, в которых размещаются ag-grid и columnDefs, без необходимости разбирать событие cellClicked.

1 Ответ

2 голосов
/ 02 мая 2019

У меня была проблема с поиском чистого способа сделать это. Вы можете использовать это, чтобы получить ссылку на родительский компонент, который инициализировал 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.log(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 .

...