如何在较小的屏幕上调整MAT对话框的大小

Question

这是我的component.html文件：

<div class="button">
<button (click)="openPopUp()" mat-button class="readBtn">Buy Now</button>
</div>

这就是.ts文件。

openPopUp() {
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.width="60%";
this.dialog.open(GetBuyDetailsComponent, dialogConfig);
}

单击按钮，我将打开名为GetBuyDetails的Mat对话框。但是这个GetBuyDetails弹出窗口或Mat对话框没有响应，因为它的宽度总是60%。如何使Mat对话框组件响应。

Answer 1

好吧，据我所知，你有两个解决方案。

根据医生的说法，你有两种选择——你必须决定哪一种更适合你。

1.覆盖对话框的panelClass

这可以很容易地实现，并且您可以将样式存储在组件目录中，解决方案如下：

组件样式.scs

::ng-deep .my-custom-panel {
width: 70%;

// your custom logic - this is a sketch
@media screen and (max-width: 660px){
width: 100%;
}
}

.组件.ts

openPopUp() {
this.dialog.open(<your component>, {
disableClose: true,
autoFocus: true,
panelClass: 'my-custom-panel'
});
}

这里的主要问题是您不能将样式范围限定到组件，每个.my-custom-panel样式都将被全局覆盖。

2.对此使用全局样式

可能会好一点，但您必须在全局styles.(s)css中定义覆盖类，其中应该去掉::ng-deep修饰符。从这一点出发，您可以简单地遵循前面的逻辑。

我将明确使用第二个，因为使用不带任何修饰符的::ng-deep(例如:host(被Angular否决了，这是一个不太好的解决方案。

希望这对你有所帮助，如果你有任何问题请评论。

Answer 2

为什么不使用像dialogConfig.width="360px"这样的像素？它对任何设备宽度都有响应。