Angular 为什么“角度材质”中的对话框行为不一致？

我正在使用来自angular materials（）的对话框。我已经使用了这个组件很多，并且遵循了文档，并且总是以文档中的方式工作。但这次我的行为不一致。对于我的应用程序的其余部分，它的工作原理与正常情况类似，但在应用程序的一个地方，用户必须向下滚动一个方向，按下一个按钮，然后对话框出现，尽管它是在覆盖整个应用程序其余部分的灰色背景下出现的

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

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

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

这听起来像MatDialog的默认行为

我如何修复此问题以便。。。此灰色屏幕不会覆盖应用程序

MatDialogConfig中的

hasBackground

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

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

---

我也面临同样的问题，在我的styles.css中删除这一行后：

html，正文{高度：100%；}

---

消失。

滚动似乎会以某种方式影响它。您能发布相关代码吗？没有它，几乎不可能知道发生了什么，因此也不可能帮助你。删除HasBackground可能会解决你的问题。除此之外，我们无法复制您的问题。但是，如果用户在页面上滚动，我认为完全相同的对话框的行为会有所不同，这又是为什么呢？这对我来说也不管用（您需要共享所有代码，以便我们可以看到您实际执行的操作。