Mat-在自定义元素中使用时对话框不能正确显示

// your-custom-element.component.ts
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { YourDialogComponent } from './your-dialog.component';

@Component({
  selector: 'app-your-custom-element',
  template: `<button (click)="openDialog()">Open Dialog</button>`
})
export class YourCustomElementComponent implements OnInit {
  constructor(private dialog: MatDialog) {}

  ngOnInit(): void {}

  openDialog() {
    this.dialog.open(YourDialogComponent);
  }
}

// your-dialog.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-your-dialog',
  template: `<h2 mat-dialog-title>Dialog Title</h2>
             <div mat-dialog-content>Dialog Content</div>
             <div mat-dialog-actions>
               <button mat-button (click)="closeDialog()">Close</button>
             </div>`
})
export class YourDialogComponent {
  constructor(public dialogRef: MatDialogRef<YourDialogComponent>) {}

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