Angular Code问题-将数据注入mat-对话框-操作

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogComponent, {
      width: '250px',
      data: { name: 'John', age: 30 }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      console.log('Dialog result:', result);
    });
  }
}

<button mat-button (click)="openDialog()">Open Dialog</button>

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

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

<h2 mat-dialog-title>Dialog Title</h2>
<div mat-dialog-content>
  <p>Name: {{ data.name }}</p>
  <p>Age: {{ data.age }}</p>
</div>
<div mat-dialog-actions>
  <button mat-button mat-dialog-close>Close</button>
</div>