Angular Material艰难地调整对话框元素的宽度

Question

我正在开发一个文本对话框，该对话框将在我的应用程序中频繁重用。我的文本对话框相当简单，它有一个标题，一条显示在文本输入上方的消息，文本输入区域，以及一个"确定"one_answers"取消"按钮。

据我所见，调整对话框宽度的最简单方法是在对话框上调用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对话框容器中，包括div.mat-dialog-container元素，这两个元素的宽度都正确。然而，从垫子形式字段到下面的所有字段仍然保持原始的180像素宽度。我可以手动调整宽度：

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

但如果我尝试使用inherit或auto，它不会起作用。任何帮助都将不胜感激！

Answer 1

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

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

Answer 2

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

在我的css文件中，

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

这就是我们所需要的。