角材料对话框组件隐藏了我所有的网站组件 [英] Angular material dialog component hides all my website components

问题描述

我正在使用角度5和角度材质(最新版本)，并且正在尝试从页面打开对话框.当我单击触发打开的按钮时，整个网站将置于空白背景，就像对话框中的内容重叠并全部隐藏一样.

I'm using angular 5 and angular material (latest version) and I'm trying to open a dialog from a page. When I click the button that triggers the opening, the entire website is put in blank background like if the dialog were overlaping it contents and hiding it all.

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

}

这是打开对话框的方法.

And this is the method that opens the 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标记中.

UPDATE: I've seen that after the dialog is rendered a class is added to my html tag. .cdk-global-scrollblock I don't know why is that class added to my html tag.

.cdk-global-scrollblock {
    position: fixed;
    width: 100%;
    overflow-y: scroll;
}

那是导致我出错的原因.有人知道为什么该类在我的html标签上吗?

That what's causing my error. Does someone knows why is that class on my html tag?

推荐答案

这是由于将cdk-global-scrollblock注入到HTML body中，这将影响具有绝对位置的组件.

This is due to cdk-global-scrollblock that is injected into the HTML body which will affect your components that have position absolute.

您可以在Angular Material主题CSS中使用以下方法覆盖它:

You can override it in the Angular Material theme CSS with:

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

或已弃用阴影穿透功能:

or with deprecated Shadow-Piercing:

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

这篇关于角材料对话框组件隐藏了我所有的网站组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！