Angular 8：材质对话框的最大高度属性不起作用

Question

我正在开发一个 Angular 8 的项目，我使用 MatDialog 在对话框中打开带有表单输入的新组件。例如：

import {MatDialog} from '@angular/material/dialog';

import {AddDialogComponent} from '../add-dialog.component';

constructor(private dialog: MatDialog){
}

private addNewRow() {

    const dialogRef = this.dialog.open(AddDialogComponent, {

      width: 'auto',
      height: 'auto',
      maxHeight: '100vh',
      maxWidth:'100vw',
      data: Data
    });
    dialogRef.afterClosed().subscribe(
      result => {

         // statements
      });
  }

当对话框打开时，ma​​xWidth: '100vw' 可以正常工作，因为不支持 ma​​xHeight: '100vh'。还尝试了 ma​​xHeight: '100vh !important' 并尝试从 .css 文件更改样式。

两者都不起作用。对此问题的任何建议或解决方案将不胜感激。

谢谢。

Answer 1

这是因为.mat-dialog-content 有一个max-height: 65vh。您可以决定不使用该指令，或者在您的 css 中覆盖它：

.mat-dialog-content {
  max-height: initial;
}

working example

Answer 2

API 建议在 maxWidth 或 maxHeight 内可以使用数字或字符串...

但是我们可以使用::ng-deep 将其放入 CSS 中会有所帮助...请注意，渲染后的 .cdk-overlay-pane 的内联最大宽度为 80%，因此我们必须使用 100% !important 否则，我们可以通过 CSS 做到这一点

相关 CSS：

::ng-deep .cdk-overlay-pane { max-width: 100vw !important; max-height: 100vh; }
::ng-deep .cdk-overlay-pane .mat-dialog-container{
  background-color:lightgreen;
  max-width: 100vw;
  max-height: 100vh;
}
::ng-deep .cdk-overlay-pane .mat-dialog-container .mat-dialog-content { max-height: 100%; }

工作stackblitz here

Answer 3

打开对话框时，您可以通过以下方式提供属性，它将全屏打开对话框

const dialogRef = this.dialog.open(exampleDialog, {
  height: '100vh',
  width: '100vw',
  maxHeight: '100vh',
  maxWidth: '100vw',
});