Angular Material 努力调整对话框元素的宽度答案

【问题标题】：Angular Material struggling adjust width of dialog elementsAngular Material 努力调整对话框元素的宽度
【发布时间】：2018-12-18 17:02:26
【问题描述】：

我正在处理一个文本对话框，我将在我的应用程序中经常重复使用它。我的文本对话框相当简单，它有一个标题、一条显示在文本输入上方的消息、文本输入区域以及一个“确定”和“取消”按钮。

据我所知，调整对话框宽度的最简单方法是在对话框上调用 open 时将其与 MatDialogConfig 对象一起传递，如下所示：

openDialog() {
    var params = {
        data: {
            // my data getting pased into the dialog
        },
        width: "600px"
    }

    const dialogRef = this.dialog.open(TextDialog, params);
    dialogRef.afterClosed().subscribe(() => { //do something after close });
}

这会导致窗口增加到首选大小，但是我在对话框模板中的所有元素都不会增加大小。如果我在调用窗口时不调整宽度并检查窗口的元素，则宽度为 228.27。文本输入的宽度为 180。

当我将元素的宽度增加到 600 时，输入保持相同的宽度。我试过检查对话框。一切都位于 mat-dialog-container 中，包括 div.mat-dialog-container 元素，这两个都是正确的宽度。但是，从 mat-form-field 及以下的所有内容仍保持原来的 180 像素宽度。我可以手动调整宽度：

mat-form-field {
    width: 600px;
}

但如果我尝试使用继承或自动，它就不起作用。任何帮助将不胜感激！

【问题讨论】：

标签： html css angular typescript

【解决方案1】：

在 Angular 中使用动态样式时，请使用 NgStyle。

这将允许您传递表达式驱动的样式，从而让 Angular 回答与如何以及何时更新 DOM 中的样式相关的所有问题。

【讨论】：

【解决方案2】：

我不知道为什么我没有早点想到这一点，但是将宽度设置为 100% 为我解决了这个问题，没有任何魔法。

在我的 css 文件中，

mat-form-field {
    width: 100%;
}

这就是我们所需要的。

【讨论】：