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

    }

当满足以下条件时，如何从GridComponent组件从onRowSelected方法运行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()方法中获取回调方法，并在单击其中一个按钮时调用该方法。

Answer 2

我照你的建议做了，但还是不起作用。

    {
      headerName: 'Edition',
      width: 80, 
      field: 'edition',         
      colId: 'edition', 
     //  cellRenderer: 'buttons', 
      cellRenderer: function (params: any) {
          let template = `<i (click)="onClick1($event)"   *ngIf="isShowButton.val1" class='fa fa-edit' ></i>  
            <i (click)="onClick2($event)" *ngIf="isShowButton.val2" class='fa fa-save'  ></i> `;
           return template;
        }

    }



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

        // const startParams = {
        // I don't know how to get this parameter `this.params` from this component
        //   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;
            }
        });
      }

变量:在this.isShowButton.val1 = false;      this.isShowButton.val2 = true;中，他们不会在按钮后改变他们的值。

onClick1和onClick2方法不起作用。:(

我仍然想写，这样在单击编辑按钮并移动到另一行后，它将更改为保存的图标。

当我对单击方法使用onClick JavaScript标记时，返回一个错误：

Uncaught ReferenceError: onClickSave is not defined at HTMLElement.onclick

此组件中的方法已定义。

onClick (javascript)：

     cellRenderer: function (params: any) {
      let template = `<i onClick="onClick1('` + params + `')"   *ngIf="isShowButton.val1" class='fa fa-edit'  ></i> 
      <i  onClick="onClick2(  '` + params + `')" *ngIf="isShowButton.val2" class='fa fa-save'  ></i> 
      `;
       return template;
    }

非常感谢您的帮助