我正在使用角材料(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大部分时间都在工作 . 但是当我必须在页面上滚动很多时,它会在背景中抛出这个灰色的屏幕 . 如果我将按钮向上移动以便用户不必滚动,那么它将按预期工作 .
1 回答
这听起来像是MatDialog的默认行为 .
MatDialogConfig中的
hasBackdrop
设置允许您控制对话框是否具有背景 . 例如: