在angular 6中如何在ag-grid数据上添加弹出窗口？

npm install --save ag-grid-angular
npm install --save ag-grid-community

import { Component } from '@angular/core';
import { GridOptions } from 'ag-grid-community';
import { AgGridAngular } from 'ag-grid-angular';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css']
})
export class GridComponent {
  private gridOptions: GridOptions;
  private rowData: any[];

  constructor() {
    this.gridOptions = <GridOptions>{
      // 配置其他属性
    };

    this.rowData = [
      // 数据
    ];
  }
}

<ag-grid-angular
  style="width: 100%; height: 100%;"
  class="ag-theme-balham"
  [gridOptions]="gridOptions"
  [rowData]="rowData">
</ag-grid-angular>

this.gridOptions.columnDefs = [
  { headerName: 'Name', field: 'name' },
  { headerName: 'Age', field: 'age' },
  { headerName: 'Country', field: 'country' },
  {
    headerName: 'Actions',
    cellRenderer: 'actionsRenderer',
    cellRendererParams: {
      // 配置其他参数
    }
  }
];

this.gridOptions.frameworkComponents = {
  actionsRenderer: ActionsRendererComponent
};

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-actions-renderer',
  template: `
    <button (click)="openPopup()">Open Popup</button>
  `
})
export class ActionsRendererComponent implements ICellRendererAngularComp {
  private params: any;

  agInit(params: any): void {
    this.params = params;
  }

  openPopup(): void {
    // 在这里打开弹出窗口
  }
}