Angular Mat Dialog全屏切换功能优化方案求助

不用关闭重开Dialog，直接通过修改现有实例的配置或CSS类切换即可，以下是两种可行方案：

方案一：结合updateSize方法与面板类控制 #

通过MatDialogRef提供的updateSize方法直接修改尺寸，配合自定义面板类突破默认max-width/max-height限制：

1. 在组件中维护全屏状态变量，初始化Dialog时设置基础配置：

private isFullscreen = false;
private dialogRef: MatDialogRef<MyDialogComponent>;

openDialog() {
  this.isFullscreen = false;
  this.dialogRef = this.dialog.open(MyDialogComponent, {
    width: '80%',
    height: '80%',
    panelClass: '',
    data: this.jsonData
  });
}

2. 实现切换逻辑，动态更新尺寸和面板类：

toggleFullScreen() {
  this.isFullscreen = !this.isFullscreen;
  
  // 更新Dialog宽高
  const [targetWidth, targetHeight] = this.isFullscreen 
    ? ['100vw', '100vh'] 
    : ['80%', '80%'];
  this.dialogRef.updateSize(targetWidth, targetHeight);
  
  // 切换全屏面板类（处理maxWidth/maxHeight限制）
  if (this.isFullscreen) {
    this.dialogRef.addPanelClass('fullscreen-dialog');
  } else {
    this.dialogRef.removePanelClass('fullscreen-dialog');
  }
}

3. 在全局样式文件（如styles.scss）中添加全屏类样式：

.fullscreen-dialog .mat-dialog-container {
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0; /* 移除默认外边距 */
  padding: 0; /* 可选：移除默认内边距，适配全屏布局 */
}

方案二：纯CSS类切换（无需调用尺寸方法） #

完全通过动态切换面板类来控制所有尺寸属性，更简洁：

1. 初始化Dialog时绑定基础面板类：

private isFullscreen = false;
private dialogRef: MatDialogRef<MyDialogComponent>;

openDialog() {
  this.isFullscreen = false;
  this.dialogRef = this.dialog.open(MyDialogComponent, {
    panelClass: 'default-dialog',
    data: this.jsonData
  });
}

2. 切换时替换面板类：

toggleFullScreen() {
  this.isFullscreen = !this.isFullscreen;
  
  if (this.isFullscreen) {
    this.dialogRef.removePanelClass('default-dialog');
    this.dialogRef.addPanelClass('fullscreen-dialog');
  } else {
    this.dialogRef.removePanelClass('fullscreen-dialog');
    this.dialogRef.addPanelClass('default-dialog');
  }
}

3. 全局样式中定义两类样式：

.default-dialog .mat-dialog-container {
  width: 80%;
  height: 80%;
  max-width: 80%;
  max-height: 80%;
}

.fullscreen-dialog .mat-dialog-container {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
}

注意事项 #

• 样式需写在全局样式文件中，避免组件样式封装导致无法覆盖Material默认样式；
• 若使用组件内样式，需关闭该组件的视图封装（encapsulation: ViewEncapsulation.None），但不推荐，易引发样式冲突。

内容的提问来源于stack exchange，提问作者Turumella Aditya