如何在mat-grid上显示弹出窗口

<mat-grid-list cols="3" rowHeight="100px">
  <!-- Grid items go here -->
</mat-grid-list>

<mat-grid-list cols="3" rowHeight="100px">
  <mat-grid-tile>
    <!-- Content for grid item 1 -->
  </mat-grid-tile>
  <mat-grid-tile>
    <!-- Content for grid item 2 -->
  </mat-grid-tile>
  <mat-grid-tile>
    <!-- Content for grid item 3 -->
  </mat-grid-tile>
</mat-grid-list>

<mat-grid-list cols="3" rowHeight="100px">
  <mat-grid-tile>
    <button mat-button (click)="openDialog()">Open Dialog</button>
  </mat-grid-tile>
  <!-- Other grid items -->
</mat-grid-list>

import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog.component'; // 弹出窗口组件的路径

export class YourComponent {
  constructor(private dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogComponent, {
      width: '250px',
      data: { /* 可选的数据传递给弹出窗口组件 */ }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      // 处理弹出窗口关闭后的逻辑
    });
  }
}