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

Question

我正在使用角度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标签上的那个类？

Answer 1

这是因为注入HTML cdk-global-scrollblock的body将影响具有绝对位置的组件。

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

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

或者已弃用的暗影穿孔：

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

Answer 2

有关API Docs的信息，请参阅MatDialogConfig。你可以将hasBackdrop设置为false。

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

Answer 3

我遇到了同样的问题。在我的css运行时看起来就像那样。

https://www.resimag.com/p1/ff8da3c59ae.jpeg

enter image description here

为此，我的解决方案是;我在组件中导入ViewEncapsulation对象。您可以了解它的使用方式和使用方法。 https://dzone.com/articles/what-is-viewencapsulation-in-angular https://angular.io/api/core/ViewEncapsulation

在In css之后我编写了这段代码; “position：initial; width：initial; overflow：hidden;”

“position：initial; width：initial;”转回它先收到的值。

这是我的dialog.component.css;

.cdk-global-scrollblock {
  position: initial;
  width: initial;
  overflow: hidden;
}

这是我的dialog.component.ts;

import {Component, OnInit,Inject, ViewEncapsulation} from '@angular/core';
import {  MatDialogRef,  MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-dialog',
  encapsulation: ViewEncapsulation.None,
  templateUrl: 'dialog.component.html',
  styleUrls: ['dialog.component.css']
})
export class DialogComponent implements OnInit {

  constructor(public dialogRef: MatDialogRef < DialogComponent > ,
    @Inject(MAT_DIALOG_DATA) public data: any) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

  ngOnInit() {}

}

Answer 4

我遇到了同样的问题。以下解决方案为我工作，

.cdk-global-scrollblock{
    position: static !important;
    width: initial !important;
    overflow-y: inherit !important;
  }

把它放到你的全局css或对话框组件loacl css中（你必须在本地的情况下启用视图封装）