Question

我用这个小小的 stackblitz 例子展示了我真实世界的大项目。我有 ag-grid，所有的列都可以通过 (cellClicked)="onCellClicked($event)" 来点击

<div style="width: 400px;">
    <ag-grid-angular #agGrid style="width: 100%; height: 200px;" class="ag-theme-fresh"
        (cellClicked)="onCellClicked($event)" [gridOptions]="gridOptions" [suppressRowClickSelection]="true">
    </ag-grid-angular>
</div>
  onCellClicked(params) {
    alert("Cell clicked");
  }

我还在最后一列插入了带有 buttonRenderer 的按钮，如下所示

 {
        headerName: "Assign buttons",
        width: 100,
        cellRenderer: this.buttonRenderer
      }

  buttonRenderer(params) {
    return "<button (click)='assign()'>Assign me</button>";
  }
  assign() {
    alert("Assigned");
  }

毕竟这些配置网格看起来像下面

这里的问题是当点击分配列上的按钮时，方法 assign() 从未触发。总是 onCellClicked() 触发并打印“Cell clicked”。我浏览了 ag-grid 文档并找到了 suppressRowClickSelection 但对我不起作用。还给了按钮 stopPropagation 但也没有用。我如何在点击时触发点击按钮的方法 assign()？

堆叠闪电战：https://stackblitz.com/edit/angular-ag-grid-angular-3ctzvo?file=app%2Fmy-grid-application%2Fmy-grid-application.component.ts

Answer 1

您还没有完全正确地实现您的按钮。您不能传递函数 cellRenderer，必须传递实现 ICellRendererAngularComp 接口的组件。因此，您需要为按钮创建自己的自定义单元格渲染器。

像这样：

@Component({
  selector: 'app-button-renderer',
  template: `
    <button type="button" (click)="onClick($event)">{{label}}</button>
    `
})

export class ButtonRendererComponent implements ICellRendererAngularComp {

  params;
  label: string;

  agInit(params): void {
    this.params = params;
    this.label = this.params.label || null;
  }

  refresh(params?: any): boolean {
    return true;
  }

  onClick($event) {
    if (this.params.onClick instanceof Function) {
      // put anything into params u want pass into parents component
      const params = {
        event: $event,
        rowData: this.params.node.data
        // ...something
      }
      this.params.onClick(this.params);

    }
  }
}

您需要为此组件提供的参数将是您的 assign 函数，用于告诉按钮在按下按钮时调用什么以及按钮标签：

headerName: "Assign buttons",
width: 100,
cellRenderer: "buttonRenderer",
cellRendererParams: {
  onClick: this.assign.bind(this),
  label: "Click"
}

最后，您需要像这样传入 frameworkComponents 参数来告诉网格有关此按钮的信息：

  frameworkComponents = {
      buttonRenderer: ButtonRendererComponent,
    }

并在您的 html 中：

[frameworkComponents]="frameworkComponents"

Here 是一个演示。

Ag-网格按钮单击在单元格内不起作用

1 个答案: