为什么角度材料中的对话表现不一致？

Question

我正在使用角材料（https://material.angular.io/）的对话框。我实际上已经使用了这个组件，并且已经按照文档进行操作，并且总是按照它在文档中的方式工作。但这次我的行为不一致。对于我的应用程序的其余部分，它的工作正常，但在应用程序的一个位置，用户必须向下滚动一个方向，按一个按钮，然后出现对话框，尽管它出现在覆盖整个其余部分的灰色背景上应用程序。

滚动似乎会影响它，因为当我将按钮移动到同一组件中的某个位置以便用户不必滚动时，它会按预期工作。造成这种情况的原因。如何修复此问题以便用户可以滚动到底部，但此灰色屏幕不会覆盖应用程序？

这是我的代码这是打开对话框的服务，它是打开对话框的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大部分时间都在工作。但是当我必须在页面上滚动很多时，它会在背景中抛出这个灰色的屏幕。如果我将按钮向上移动以便用户不必滚动，那么它将按预期工作。

Answer 1

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

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

我怎么能解决这个问题......这个灰色屏幕不会覆盖应用程序？

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

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