我使用的是 angular 5 和 angular material(最新版本),我正在尝试从页面打开一个对话框。当我单击触发打开的按钮时,整个网站都处于空白背景中,就像对话框覆盖其内容并将其全部隐藏一样。
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
moduleId: module.id,
selector: 'app-dialog',
templateUrl: 'dialog.component.html',
styleUrls: ['dialog.component.scss']
})
export class DialogComponent implements OnInit {
constructor(public dialogRef: MatDialogRef<DialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
onNoClick(): void {
this.dialogRef.close();
}
ngOnInit() {
}
}
这是打开对话框的方法。
onSubmit() {
const dialogRef = this.dialog.open(DialogComponent, {
width: '250px',
data: { name: 'Juan Manuel', animal: 'Perro' }
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
console.log(result);
});
}
更新: 我已经看到在呈现对话框后,一个类被添加到我的 html 标记中。 .cdk-global-scrollblock 我不知道为什么要将那个类添加到我的 html 标记中。
.cdk-global-scrollblock {
position: fixed;
width: 100%;
overflow-y: scroll;
}
那是什么导致了我的错误。有人知道为什么那个类在我的 html 标签上吗?
最佳答案
最简单的修复方法是将对话框滚动策略设置为新的 NoopScrollStrategy
对象:
const dialogRef = this.dialog.open(DialogComponent, {
width: '250px',
data: { name: 'Juan Manuel', animal: 'Perro' },
scrollStrategy: new NoopScrollStrategy()
});
这只需要额外导入:
import { NoopScrollStrategy } from '@angular/cdk/overlay';
关于Angular Material 对话框组件隐藏了我所有的网站组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47782890/