javascript - 如何在 Angular 7 中调整 Angular Material 对话框的大小？

Question

我正在使用 Angular Material 对话框和AngularJS 7。我可以拖动对话框，但我想让该对话框可调整大小，以便用户可以将其调整为他想要的大小。

    const dialogRef = this.dialog.open(DialogCompComponent,{data : "hello"});
      dialogRef.afterClosed().subscribe(result => {
        console.log(`Dialog closed: ${result});
    });

其中DialogCompComponent是对话框内容组件。如何使这个 Angular Material 对话框可调整大小？

Answer 1

根据我的经验，您可以覆盖覆盖包装器、对话框容器的最大宽度属性并定义调整大小。你应该以这样的方式结束:

.cdk-overlay-pane{
  width: unset !important;
  height: unset !important;
  max-width: 100% !important;
}

.mat-dialog-container{
  max-width: 100%;
  max-height: 100% !important;
  resize: both;
}

尝试重现它:https://stackblitz.com/edit/angular-material-dialog-resize-vbom8f?file=src%2Fstyles.css

有效，但仅适用于!important声明。尝试使用您的代码来找到不使用它的解决方法。我相信您知道，!important 并不是最佳的 CSS 实践。