角度材质对话框组件隐藏了我的所有网站组件

我正在使用角度5和角度材料(最新版本),我正试图从页面打开一个对话框 . 当我点击触发开口的按钮时,整个网站都被置于空白背景中,就好像对话框重叠了内容并隐藏了所有内容 .

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() {
    }

}

这是打开Dialog的方法 .

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标签上的那个类?

回答(2)

2 years ago

这是因为注入HTML bodycdk-global-scrollblock 会影响位置绝对的组件 .

您可以在Angular Material主题CSS中覆盖它:

.cdk-global-scrollblock {
    position: static;
    overflow: hidden !important;
}

或者已弃用的暗影穿孔:

/deep/ .cdk-global-scrollblock {
    position: static;
    overflow: hidden !important;
}

2 years ago

有关 MatDialogConfig ,请参阅API Docs . 您可以将 hasBackdrop 设置为 false .

const dialogRef = this.dialog.open(DialogComponent, {
        width: '250px',
        data: { name: 'Juan Manuel', animal: 'Perro' },
        hasBackdrop: false
    });