要解决Angular的MatDialog不显示灰色背景覆盖的问题,你可以尝试以下解决方法:
import { MatDialogModule } from '@angular/material/dialog';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
MatDialogModule,
BrowserAnimationsModule
],
// ...
})
export class AppModule { }
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
@Component({
// ...
})
export class YourComponent {
constructor(private dialog: MatDialog) { }
openDialog() {
const dialogConfig = new MatDialogConfig();
dialogConfig.backdropClass = 'cdk-overlay-transparent-backdrop';
dialogConfig.panelClass = ['mat-dialog-container'];
// 打开对话框...
this.dialog.open(YourDialogComponent, dialogConfig);
}
}
.cdk-global-overlay-wrapper {
background-color: rgba(0, 0, 0, 0.6) !important; /* 调整透明度,如果需要的话 */
}
请注意,以上解决方法是基于Angular Material版本为12的情况下提供的。如果你使用的是其他版本,可能会有所不同。在这种情况下,请参考Angular Material的官方文档和API参考来获取准确的解决方法。
上一篇:Angular的MatDialog 'bootstrap'未正确显示或丢失。
下一篇:Angular的MatDialog组件在使用.afterClosed().subscribe()方法时返回undefined,尽管在.close(..)方法中发送了数据。