Я использую диалог из угловых материалов (https://material.angular.io/). Я использовал этот компонент на самом деле много и следовал документам, и всегда заставлял его работать так же, как в документах. Но на этот раз я имею Непоследовательное поведение. Это работает как обычно для остальной части моего приложения, но в одном месте в приложении пользователь должен прокрутить путь вниз, нажать кнопку, и затем появится диалоговое окно, хотя оно появляется на сером фоне, покрывающем всю остальная часть приложения.
Прокрутка как-то влияет на это, потому что, когда я перемещаю кнопку в место в том же компоненте, так что пользователю не нужно прокручивать, она работает как положено. Чем это вызвано. Как я могу это исправить, чтобы пользователь мог прокрутить вниз, но этот серый экран не будет закрывать приложение?
Вот мой код
Это служба, которая открывает диалоговое окно, это метод с именем openDialog (), который открывает диалоговое окно. Я внедряю это serivce и вызываю его во всем приложении, и иногда оно работает, как ожидалось, и иногда оно выдает этот серый фон.
@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 работает большую часть времени. Но когда мне приходится много прокручивать на странице, он бросает этот серый экран на задний план. Если я переместлю кнопку вверх по странице, чтобы пользователю не приходилось выполнять прокрутку, она будет работать, как ожидалось.