没有对话框组件类的Angular材质视见子对话框

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDialogModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// dialog.component.ts
import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog',
  template: `
    <h2>Dialog Content</h2>
    <p>This is the content of the dialog.</p>
    <button mat-button (click)="closeDialog()">Close</button>
  `
})
export class DialogComponent {
  constructor(public dialogRef: MatDialogRef<DialogComponent>) { }

  closeDialog(): void {
    this.dialogRef.close();
  }
}

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

@Component({
  selector: 'app-root',
  template: `
    <button mat-button (click)="openDialog()">Open Dialog</button>
  `
})
export class AppComponent {
  constructor(public dialog: MatDialog) { }

  openDialog(): void {
    this.dialog.open(DialogComponent);
  }
}