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

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

最简单的解决方法是将对话框滚动策略设置为新NoopScrollStrategy对象：

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

这将只需要额外的导入：

import { NoopScrollStrategy } from '@angular/cdk/overlay';

Answer 2

这是因为cdk-global-scrollblock它被注入到HTML中body,这将影响具有绝对位置的组件.

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

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

或者已弃用的暗影穿孔:

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

Answer 3

为了充分理解为什么.cdk-global-scrollblock要添加到html标签中，我想对MatDialog Scroll Strategies做一个简短的说明：

MatDialog 滚动策略

MatDialog组件有选项scrollStrategy (type ScrollStrategy)，它决定了对话框使用的滚动策略，如：https : //material.angular.io/components/dialog/api#MatDialogConfig

要关联滚动策略，您必须将返回滚动策略的函数传递给MatDialogConfig：

const dialogRef = this.dialog.open(DialogComponent, {
    scrollStrategy: this.overlay.scrollStrategies.block()
    // .. other options
});

默认情况下，MatDialog将使用block源代码中的策略。

其他可用的策略noop，reposition以及close-描述这里。

.cdk-global-scrollblock css类

使用策略html时将此类添加到标签中block。它用于阻止对话框后面的内容滚动，尤其是在移动设备 (iOS) 上 - 这position: fixed;就是使用的原因。但是当应用此规则时，窗口将滚动回屏幕顶部。所以需要计算当前窗口的滚动，并将其应用到html标签上。

源代码可以在这里找到，在BlockScrollStrategy课堂上。我将在这里复制一些代码：

this._previousScrollPosition = this._viewportRuler.getViewportScrollPosition();

// Note: we're using the `html` node, instead of the `body`, because the `body` may
// have the user agent margin, whereas the `html` is guaranteed not to have one.
  root.style.left = coerceCssPixelValue(-this._previousScrollPosition.left);
  root.style.top = coerceCssPixelValue(-this._previousScrollPosition.top);
  root.classList.add('cdk-global-scrollblock');

解决方案

1. 真正的问题在于你的 css。

确保 的值this._previousScrollPosition不正确，因此请仔细检查添加到html和body标签的 css 规则。

我能够通过使用以下 css 来复制您的问题：

html, body {
  min-height: 100%;
  height: 100%;
}

body {
 overflow: auto;
}

此处示例：https : //stackblitz.com/edit/angular-xvucu4。

这可以通过删除body { overflow: auto; }.

此处示例：https : //stackblitz.com/edit/angular-xvucu4-jek3zb。

如果您确实需要html并body占用 100% 的视口，即使内容更小，请使用以下 css：

html {
    height: 100%;
}

body {
   min-height: 100%:
}

或者

2.设置noop滚动策略：

import {Overlay} from '@angular/cdk/overlay';

constructor {
  public overlay: Overlay
}

const dialogRef = this.dialog.open(DialogComponent, {
    scrollStrategy: this.overlay.scrollStrategies.noop() 
    // .. other options
});

即使打开对话框，页面内容也会滚动。

示例：https : //stackblitz.com/edit/angular-xvucu4-t4uwwb。

Answer 4

我遇到了同样的问题。以下解决方案对我有用，

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

将其放入全局 css 或对话框组件 loacl css 中（如果是本地，则必须启用视图封装）

Answer 5

请参阅的API 文档MatDialogConfig。您可以设置hasBackdrop为false.

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