Question

是否有方法可以更改打开的Angular Material 2对话框的宽度（或高度）？

我最接近的是获得对话框的引用并从对话框中调用updateSize方法。虽然我不认为对话框引用方法是这样工作的。

我使用对话框来捕获和提交表单数据。根据响应，成功或错误，对话框中的内容会更新。在这一点上，我想减少对话框的宽度。

我已安装Angular v4.2.4和Angular Material 2 v2.0.0-beta.12

如果需要，很高兴提供其他信息或代码示例。或者考虑采用不同的方法。

Answer 1

查看MatDialogConfig中提供height，width，max-height和max-width参数的params。这些参数作为对象传递给open方法。

所以你可以这样做：

    let dialogRef = dialog.open(MyComponent, {
      height: '400px',
      width: '600px',
    });

Answer 2

我走在正确的轨道上。我的论点错了。

要更新打开的对话框的宽度或高度，您将获得对打开对话框的引用并调用updateSize方法。第一个参数设置宽度，第二个参数设置高度。两者都是string类型。

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-my-dialog',
  templateUrl: './my-dialog.component.html'
})
export class MyDialogComponent implements OnInit {
    private shouldSizeUpdate: boolean;

    constructor(private dialogRef: MatDialogRef<MyDialogComponent>,
                @Inject(MAT_DIALOG_DATA) data: any) {
        this.shouldSizeUpdate = data.shouldSizeUpdate;
    }

    ngOnInit() {
        if (this.shouldSizeUpdate) this.updateSize();
    }

    updateSize() {
        this.dialogRef.updateSize("300px", "500px");
    }

}

以及进一步参考的代码。

     /**
     * Updates the dialog's width and height.
     * @param {?=} width New width of the dialog.
     * @param {?=} height New height of the dialog.
     * @return {?}
     */
    MatDialogRef.prototype.updateSize = function (width, height) {
        if (width === void 0) { width = 'auto'; }
        if (height === void 0) { height = 'auto'; }
        this._getPositionStrategy().width(width).height(height);
        this._overlayRef.updatePosition();
        return this;
    };

更新打开的Angular Material 2对话框的宽度或高度

2 个答案: