在ag-Grid中，自定义单元格渲染器与事件监听器配合工作的方法如下所示：

1. 首先，创建一个自定义的单元格渲染器组件，例如CustomRendererComponent：

import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-renderer',
  template: `
    Click me
  `,
})
export class CustomRendererComponent {
  onClick() {
    // 在此处处理点击事件
    console.log('Button clicked');
  }
}

2. 在你的组件中，使用ag-Grid并注册CustomRendererComponent作为自定义的单元格渲染器：

import { Component } from '@angular/core';

@Component({
  selector: 'app-grid',
  template: `
    
  `,
})
export class GridComponent {
  rowData = [
    { name: 'John', age: 25 },
    { name: 'Jane', age: 30 },
    { name: 'Bob', age: 35 },
  ];

  columnDefs = [
    { headerName: 'Name', field: 'name' },
    { headerName: 'Age', field: 'age', cellRendererFramework: CustomRendererComponent },
  ];
}

3. 最后，在CustomRendererComponent中添加适当的事件监听器：

import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-renderer',
  template: `
    Click me
  `,
})
export class CustomRendererComponent {
  onClick() {
    console.log('Button clicked');
  }
}

这样，你就可以在CustomRendererComponent中添加自定义的事件监听器，并在点击按钮时触发相应的操作。