为什么有角材质中的对话框行为不一致?

时间:2018-08-27 15:32:17

标签: angular angular-material

我正在使用角度材料(https://material.angular.io/)中的对话框。我实际上已经大量使用了该组件,并遵循了文档,并且始终使它像在文档中那样工作。但是这次我的行为不一致。对于我的其余应用程序,它的工作方式与正常情况相同,但是在应用程序的某个位置,用户必须向下滚动某种方式,按一个按钮,然后出现对话框,尽管该对话框的背景是灰色的,覆盖了整个应用程序的其余部分。应用程式。

It works correctly here It the gray background covers my app

以某种方式滚动似乎会影响它,因为当我将按钮移动到同一组件中的某个位置以便用户不必滚动时,它会按预期工作。是什么原因造成的。我该如何解决此问题,以便用户可以滚动到底部,但该灰色屏幕不会覆盖该应用程序?

这是我的代码 这是打开对话框的服务,是打开对话框的称为openDialog()的方法。我注入了这个服务,并在整个应用程序中调用它,有时它会按预期工作,有时会在灰色背景下出现。

@Injectable()
export class HttpResponseService {

  constructor(private local: LocalStorageService, private dialog: MatDialog) { }

  handleSuccess() {

  }

  handleHttpError(e: HttpErrorResponse) {
    if ( e.status === 401) {
      alert('** Your credentials are not valid. **');
      this.local.deleteLocalStorage();
      window.location.href =  environment.base;
    }

      let header = 'Error';
      let msg = '';
      if (e.error.errors) {
        header = e.error.message;
        for (const key in e.error.errors) {
          msg += key + ': ' + e.error.errors[key] + '\n';
        }
      } else {
        msg = e.error.message;
      }
      this.openDialog('** ' + header + ' ** \n \n \n' + msg);
  }

  openDialog(message) {
    const dialogRef = this.dialog.open(DialogContentComponent, {
      width: '350px',
      data: {message: message}
    });
  }

  openConfirmation() {
    const dialogRef = this.dialog.open(ConfirmComponent);
    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }
}

如上所述,openDialog在大多数情况下都有效。但是,当我必须在页面上滚动很多时,它将在后台显示此灰色屏幕。如果我将按钮向上移动到页面上,因此用户不必滚动,那么它将按预期工作。

2 个答案:

答案 0 :(得分:0)

  

它在覆盖整个应用程序其余部分的灰色背景下出现

这听起来像MatDialog的默认行为。

  

如何解决此问题,以便...此灰屏不会覆盖该应用?

MatDialogConfig中的hasBackdrop设置允许您控制对话框是否具有背景。例如:

this.dialog.open(MyDialog, {
    hasBackdrop: false
});

答案 1 :(得分:-2)

在我的styles.css中删除此行之后,我遇到了同样的问题:

html,正文{高度:100%; }

消失了。