Angular 6 Ag

本文介绍了Angular 6 Ag-grid单元格渲染器单击功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

所以我正在尝试设置ag-grid，但我做不到一件事.我想有一列动作.然后，我希望它有一个链接或按钮来触发组件文件中的方法.

So I'm trying to setup ag-grid and I can't get one thing to work. I want to have a column that is actions. Then I want it to have a link or button that triggers a method in the component file.

对于列def，我有以下内容.我在做什么错了?

For the column def I have the following. What am I doing wrong?

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

推荐答案

我使用cellRenderFramework:

I use 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;