如何从ag-grid单元格单击Angular 6打开模态对话框

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

import { Component } from '@angular/core';
import { GridOptions } from 'ag-grid-community';
import { MatDialog } from '@angular/material/dialog';
import { ModalDialogComponent } from './modal-dialog/modal-dialog.component';

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

  constructor(private dialog: MatDialog) {
    this.gridOptions = {
      onCellClicked: this.openModalDialog.bind(this),
      // 其他配置项...
    };

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

  openModalDialog(params: any) {
    const dialogRef = this.dialog.open(ModalDialogComponent, {
      data: params.data, // 将单元格数据传递给模态对话框组件
      // 其他配置项...
    });

    dialogRef.afterClosed().subscribe(result => {
      // 处理模态对话框关闭后的逻辑
    });
  }
}

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-modal-dialog',
  templateUrl: './modal-dialog.component.html',
  styleUrls: ['./modal-dialog.component.css']
})
export class ModalDialogComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
}

<h2>Modal Dialog</h2>
<p>{{ data }}</p>
<!-- 其他内容... -->