如何修改已打开的Angular Material 2对话框的宽高？

你提到的通过对话框引用调用updateSize()方法的思路完全正确！这正是Angular Material官方提供的动态调整已打开对话框尺寸的标准方式，在你使用的Angular v4.2.4对应的Material版本里已经支持这个方法了。

下面给你详细说怎么实现，刚好匹配你“表单提交后根据响应调整对话框宽度”的场景：

步骤1：保存对话框引用 #

在父组件打开对话框时，把返回的MatDialogRef实例保存下来，这样后续就能调用它的方法：

import { MatDialog, MatDialogRef } from '@angular/material';
import { YourDialogComponent } from './your-dialog.component';

// 父组件类里的方法
openDialog() {
  // 保存对话框引用
  this.dialogRef = this.matDialog.open(YourDialogComponent, {
    width: '800px', // 初始宽度
    data: { /* 传递给对话框的初始数据 */ }
  });

  // 可以监听对话框关闭事件（可选）
  this.dialogRef.afterClosed().subscribe(result => {
    console.log('对话框已关闭');
  });
}

步骤2：在需要的时机调用updateSize() #

如果你是在对话框组件内部处理表单提交并调整尺寸，那可以直接在组件里注入MatDialogRef：

import { MatDialogRef } from '@angular/material';

export class YourDialogComponent {
  constructor(public dialogRef: MatDialogRef<YourDialogComponent>) {}

  onSubmitForm() {
    // 模拟表单提交请求
    this.yourService.submitForm(formData).subscribe(
      (successResponse) => {
        // 更新对话框内容（比如显示成功提示）
        this.showSuccessMessage = true;
        // 缩小对话框宽度
        this.dialogRef.updateSize('400px'); // 只设置宽度，高度保持不变
        // 如果需要同时调整高度：this.dialogRef.updateSize('400px', '300px');
      },
      (errorResponse) => {
        // 错误场景下也可以调整尺寸
        this.showErrorMessage = true;
        this.dialogRef.updateSize('500px');
      }
    );
  }
}

如果是在父组件里根据响应调整，那直接用之前保存的dialogRef调用方法即可。

额外细节 #

• updateSize()的参数支持带单位的字符串（比如'400px'、'60%'），也可以不传第二个参数（高度），此时高度会保持原有值；
• 如果你需要更精细的样式控制，也可以通过自定义对话框的CSS类，但官方推荐优先使用updateSize()，因为它能避免直接操作DOM带来的样式冲突问题；
• 确认你的@angular/material版本和Angular v4.2.4兼容，通常v2.x版本的Material对应Angular v4，这个版本确实包含updateSize方法。

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