要创建一个没有背景的Angular Material对话框,你可以使用{hasBackdrop: false}选项。以下是一个示例代码,展示了如何使用Angular Material对话框并设置hasBackdrop选项为false:
npm install @angular/material @angular/cdk @angular/animations
import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
  selector: 'dialog-component',
  template: `
    Dialog Title
    
      Dialog Content
     
    
      
     
  `,
})
export class DialogComponent {
  constructor(
    public dialogRef: MatDialogRef,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}
}
 
@Component({
  selector: 'my-component',
  template: `
    
  `,
})
export class MyComponent {
  constructor(public dialog: MatDialog) {}
  openDialog() {
    const dialogRef = this.dialog.open(DialogComponent, {
      hasBackdrop: false,
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }
}
现在,当你点击"Open Dialog"按钮时,将会打开一个没有背景的对话框。