EventEmitter 和 ag-grid-angular 如何在 ag-grid-angular 中使用 `emit` 方法

Question

如何在ag-grid-angular 中使用emit 方法。在ag-grid-angular 中，我有一些按钮应该在单击另一行时交替隐藏。

当我点击另一行时，按钮不会改变。

我尝试使用方法emit，但在我有按钮的另一个组件ButtComponent 中看不到它。我不知道这是否是个好主意。

gridComponent.component.html：

   <ag-grid-angular   
        (rowSelected)="onRowSelected($event)"  
        [rowSelection]="rowSelection" 
        (selectionChanged)="onSelectionChanged($event)" 
        [suppressChangeDetection]='true' 
        #agGrid 
        style="width: 100%; height: 100%;" 
        id="uprawnieniaGrid" 
        class="ag-theme-balham" 
        [columnDefs]="columnDefs"
        [rowData]="rowData" 
        [frameworkComponents]="frameworkComponents"
         (gridReady)="onGridReady($event)">
    </ag-grid-angular>

gridComponent.component.ts：

export class GridComponent implements OnInit { 

      @Output() eventEmitter: EventEmitter<string> = new EventEmitter<string>();
      rowData:any;   
      frameworkComponents: any; 
      gridApi?: GridApi;
      columnApi?: ColumnApi; 
      columnDefs:any;

      constructor( private dataService: DataService ) {

        this.frameworkComponents = {      
          buttons: ButtComponent,
          col5RenderComponent: Col3RenderComponent,
        };

        this.columnDefs = [{
          headerName: '',     
          headerCheckboxSelection: true,
          checkboxSelection: true, 
        }, {
          headerName: 'col 1',       
          field: 'col1'         
        }, {
          headerName: 'col 2', 
          field: 'col2'
        }, {
          headerName: 'col 3 ',     
          field: 'col3',      
          editable: true,
          cellRenderer: 'col3RenderComponent'    
        }, {
          headerName: "Edition",
          field: "value",
          cellRenderer: "buttons",
          colId: "edition"      
        }
        ];

      }

       ngOnInit() {
        this.dataService.dataList().subscribe(dataList => {
          if (dataList.data) {
              this.rowData = dataList.data;
          }
        });
       }

      onGridReady(params: any) {    
        this.gridApi = params.api;
        this.columnApi = params.columnApi;
        params.api.sizeColumnsToFit();   
      } 


      onSelectionChanged(event: any) {
        var rowCount = event.api.getSelectedNodes().length;
        console.log("selection changed, " + rowCount + " rows selected");
      }

      onRowSelected(event: any) {
        console.log("row " + event.node.data.id + " selected = " + event.node.selected);
       if (event.node.selected == false){
        this.eventEmitter.emit('Register click');
        console.log('EMIT');

       }
      }
    }

ButtComponent.component.html：

我这里有按钮，但没有调用eventEmitterTemp 方法。

 <i (click)="onClick1($event)" (eventEmitter)='eventEmitterTemp($event)' *ngIf="isShowButton.val1" class='fa fa-edit'  ></i>  
 <i (click)="onClick2($event)" *ngIf="isShowButton.val2" class='fa fa-save' ></i> 

buttComponent.component.ts:

export class ButtComponent implements ICellRendererAngularComp  {

      params: any;
      isShowButton = {
        val1: true,
        val2: false
      };

      agInit(params: any): void {
        this.params = params;     
      }

      constructor(private dataService: DataService) {}

      refresh(params: any): boolean {

        this.isShowButton.val1 = false;
        this.isShowButton.val2 = true;
        console.log('refresh');
        return true;
      }


      onClick1($event: any) {
        this.isShowButton.val1 = false;
        this.isShowButton.val2 = true;

        const startParams = {
          rowIndex: this.params.data.id - 1,
          colKey: 'col4'
        };
        this.params.api.startEditingCell(startParams); 
      }


      onClick2($event: any) {

        this.isShowButton.val1 = true;
        this.isShowButton.val2 = false;

        this.dataService.dataSet().subscribe(dataList => { 
            if (dataList.data) {
                this.rowData = dataList.data;
            }
        });
      }

        eventEmitterTemp($event: any){

        this.isShowButton.val1 = false;
        this.isShowButton.val2 = true;
            console.log('-----EMIT GET 1');
        }

    }

当条件满足时，如何从onRowSelected方法中运行GridComponent组件中的eventEmitterTemp方法： if (event.node.selected == false)

非常感谢您的帮助。

Answer 1

首先，如果您发布一个完整的运行示例，例如 StackBlitz，将会非常有帮助。

但是，我认为您的问题是您尝试绑定到“eventEmitter”，即您的代码： <i (click)="onClick1($event)" **(eventEmitter)='eventEmitterTemp($event)**' *ngIf="isShowButton.val1" class='fa fa-edit' ></i>

据我所知，鉴于您显示的代码，这应该会产生编译器错误。 我不太确定你的意思是什么......

如果您希望在单击按钮时执行 eventEmitterTemp 方法中的代码，为什么不将该代码添加到单击处理程序方法之一（onClick1 或 onClick2，或两者，取决于您想要什么做）？

在我看来，您这里还有一个设计问题。 您的“ButtComponent”是一个单元格渲染器，但您有它调用服务，并且显然试图与网格交互（更改网格行等）

与网格的交互应在其父组件中完成，并且渲染器应保持非常简单 - 只需呈现按钮，根据需要启用和禁用它们，并在单击按钮时通知父组件。

其中不明显的部分是如何在单击按钮时通知父组件，我猜这就是您尝试在渲染器中执行所有这些操作的原因。

这样做的诀窍是在列定义中指定“cellRendererParams”。 'cellRendererParams' 的值可以是您想要的任何值（请参阅https://www.ag-grid.com/javascript-grid-cell-rendering-components/#complementing-cell-renderer-params）。 在您的情况下，您可以传入回调方法。渲染器可以在它的 agInit() 方法中获取回调方法，并在单击其中一个按钮时调用它。