Angular 6 ag-grid 单元格渲染器单击功能

Question

所以我正在尝试设置 ag-grid，但我无法让一件事起作用。我想有一列是行动。然后我希望它有一个链接或按钮来触发组件文件中的方法。

对于列 def 我有以下内容。我做错了什么？

 {
    headerName: 'Actions',
    cellRenderer: params => {
      return `<a (click)="onEditClick("${params.data.hostname}")">Edit</a>`;
    }
 }

Answer 1

我使用 cellRenderFramework：

    {
    headerName: '', width: 30,
    cellRendererFramework: ActionCellRendererComponent,
    cellRendererParams: {
      icon: 'fa-download',
      action: this.downloadAttachmentAction
    }
  }

比我有自定义组件

@Component({
  selector: 'cu-download-link-cell-renderer',
  template: `
  <div class="text-center">
    <i class="fa {{params.icon}}" (click)="onClick()" aria-hidden="true"></i>
  </div>`
})
export class ActionCellRendererComponent {

    params;

    constructor() {
    }

    agInit(params): void {
        this.params = params;
        if (_.isNil(params.action)) {
            throw new Error('Missing action parameter for ActionCellRendererComponent');
       }
   }

   onClick(): void {
       this.params.action(this.params);
   }
}

export type CellAction = (params) => void;

Answer 2

使用 cellRendererFramework 添加操作按钮。

App.component.ts

columnDefs = [
  { headerName: 'First Name', field: 'firstName', sortable: true, filter: true },
  { headerName: 'Last Name', field: 'lastName', sortable: true, filter: true },
  { headerName: 'Email', field: 'email', sortable: true, filter: true },
  { headerName: 'User Name', field: 'userIdName', sortable: true, filter: true },
  { headerName: 'Role', field: 'role', sortable: true, filter: true },
  { headerName: 'Actions', field: 'action', cellRendererFramework: CellCustomComponent }];

rowData: any;

ngOnInit() {
  const empDatas = localStorage.getItem('user');
  const finalData = JSON.parse(this.empDatas);
  this.rowData = this.finalData;
}

在上面的代码中，我们可以看到CellCustomComponent。创建该组件并添加按钮。

cell-custom.component.html

<button type="button" class="btn-success" (click)="editRow()">Edit</button>
<button type="button" class="btn-success" (click)="viewRow()">View</button>

现在在 cell-custom.component.ts 中添加函数

cell-custom.component.ts

export class CellCustomComponent implements OnInit {
  data: any;
  params: any;
  constructor(private http: HttpClient, private router: Router) {}

  agInit(params) {
    this.params = params;
    this.data = params.value;
  }

  ngOnInit() {}

  editRow() {
    let rowData = this.params;
    let i = rowData.rowIndex;
    console.log(rowData);
  }

  viewRow() {
    let rowData = this.params;
    console.log(rowData);
  }
}

之后我们需要在App.module.ts

中添加这个组件

app.Module.ts

@NgModule({
  declarations: [AppComponent, CellCustomComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    AgGridModule.withComponents([AppComponent])
  ],
  providers: [],
  entryComponents: [CellCustomComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

现在我们可以使用 Button 触发组件文件中的方法。

Answer 3

是的，使用 cellRendererFramework 来处理渲染。

在您的 columnDefs 中：

this.columnDefs = [
  {
    headerName: 'Header Name', field: 'field',
    cellRendererFramework: ColRenderer,
    cellRendererParams: { context: this },
    sortable: true, filter: true
  },
  ...
 ];

然后在你的 ColRenderer 中：

@Component({
  template: `<a (click)="clickHandler(rowData)">{{rowData.Member}}</a>`
})
export class ColRenderer implements ICellRenderer {
  public rowData: any;
  private params: any;

  public agInit(params: { data: any, context: any }) {
    this.rowData= params.data;
    this.params = params;
  };

  public clickHandler(data: any) {
    this.params.context.onEditClick(data);
  }
  ...
}

显然根据需要更改上面的名称。只知道 上下文 是关键。您将组件的上下文传递给渲染器，然后使用该上下文在渲染​​器中调用您想要单击的函数。

Answer 4

已经很完美了！ 谢谢

prebilling-view.component.ts (cellRendererParams: { context: this })

 {
field: 'adjustmentUnit',
  tooltipField: 'adjustmentUnit',
  cellRendererParams: { context: this },
  cellRendererSelector: (params: any) => {
    const component = {
      component: 'textAreaVueRenderer',
      params: { values: true, textAlign: 'right', typeValue:false}
    }
    return component;
  },
  cellStyle: { textAlign: 'right' },
  headerClass: 'textRight',
},

prebilling-view.component.ts 中的函数

onEditChange(val:string, index:any){
console.log("valor: "+ val)
console.log("index: "+ index)

}

输入 cellRenderSelector textAreaVueRender

  <input *ngIf="editEnabled"
            type="number"
            (input)="inputNegativeChangeHandler($event)"/>

cellRenderSelector textAreaVueRender 组件中的函数

 inputNegativeChangeHandler($event: any) {

this.params.context.onEditChange($event.target.value,this.params.rowIndex);

}