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

最简单的解决方法是将对话框滚动策略设置为新的>>> mean = 4230 >>> uncertainty = 10 >>> pos_to_first = len(str(mean)) - 1 >>> f"({mean/10**pos_to_first} ± {uncertainty/10**pos_to_first}) E{pos_to_first}" '(4.23 ± 0.01) E3'对象：

NoopScrollStrategy

这仅需要额外的导入：

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

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

请参阅MatDialogConfig hasBackdrop。您可以将false设置为const dialogRef = this.dialog.open(DialogComponent, { width: '250px', data: { name: 'Juan Manuel', animal: 'Perro' }, hasBackdrop: false });。

$encpassword = md5($password);
$stmt->bindParam(":password", $encpassword, PDO::PARAM_STR);

Answer 4

我遇到同样的问题。在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

在CSS之后，我编写了这段代码； “位置：初始；宽度：初始；溢出：隐藏；”

“位置：初始；宽度：初始；”返回它首先收到的值。

这是我的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 5

只需添加此替代CSS或CSS类即可解决背景不可见的问题。

.cdk-global-scrollblock{
    position: initial;
}

Answer 6

为了完全理解为什么将#define BOOST_PYTHON_STATIC_LIB #define BOOST_LIB_NAME "boost_numpy35" //#include <boost/config/auto_link.hpp> #include <boost/python.hpp> #include <boost/python/numpy.hpp> #include <iostream> #include <opencv2/opencv.hpp> namespace py = boost::python; namespace np = boost::python::numpy; void Init() { // set your python location. wchar_t str[] = L"D:\\Anaconda3\\envs\\tensorflow_vision"; Py_SetPythonHome(str); Py_Initialize(); np::initialize(); } np::ndarray ConvertMatToNDArray(const cv::Mat& mat) { py::tuple shape = py::make_tuple(mat.rows, mat.cols, mat.channels()); py::tuple stride = py::make_tuple(mat.channels() * mat.cols * sizeof(uchar), mat.channels() * sizeof(uchar), sizeof(uchar)); np::dtype dt = np::dtype::get_builtin<uchar>(); np::ndarray ndImg = np::from_data(mat.data, dt, shape, stride, py::object()); return ndImg; } cv::Mat ConvertNDArrayToMat(const np::ndarray& ndarr) { //int length = ndarr.get_nd(); // get_nd() returns num of dimensions. this is used as a length, but we don't need to use in this case. because we know that image has 3 dimensions. const Py_intptr_t* shape = ndarr.get_shape(); // get_shape() returns Py_intptr_t* which we can get the size of n-th dimension of the ndarray. char* dtype_str = py::extract<char *>(py::str(ndarr.get_dtype())); // variables for creating Mat object int rows = shape[0]; int cols = shape[1]; int channel = shape[2]; int depth; // you should find proper type for c++. in this case we use 'CV_8UC3' image, so we need to create 'uchar' type Mat. if (!strcmp(dtype_str, "uint8")) { depth = CV_8U; } else { std::cout << "wrong dtype error" << std::endl; return cv::Mat(); } int type = CV_MAKETYPE(depth, channel); // CV_8UC3 cv::Mat mat = cv::Mat(rows, cols, type); memcpy(mat.data, ndarr.get_data(), sizeof(uchar) * rows * cols * channel); return mat; } int main() { using namespace std; try { // initialize boost python and numpy Init(); // import module py::object main_module = py::import("__main__"); py::object print = main_module.attr("__builtins__").attr("print"); // this is for printing python object // get image cv::Mat img; img = cv::imread("Lenna.jpg", cv::IMREAD_COLOR); if (img.empty()) { std::cout << "can't getting image" << std::endl; return -1; } // convert Mat to NDArray cv::Mat cloneImg = img.clone(); // converting functions will access to same data between Mat and NDArray. so we should clone Mat object. This may important in your case. np::ndarray ndImg = ConvertMatToNDArray(cloneImg); // You can check if it's properly converted. //print(ndImg); // convert NDArray to Mat cv::Mat matImg = ConvertNDArrayToMat(ndImg); // also you can convert ndarray to mat. // add 10 brightness to converted image for (int i = 0; i < matImg.rows; i++) { for (int j = 0; j < matImg.cols; j++) { for (int c = 0; c < matImg.channels(); c++) { matImg.at<cv::Vec3b>(i, j)[c] += 10; } } } // show image cv::imshow("original image", img); cv::imshow("converted image", matImg); cv::waitKey(0); cv::destroyAllWindows(); } catch (py::error_already_set&) { PyErr_Print(); system("pause"); } system("pause"); return 0; }添加到html标记中，我想对MatDialog滚动策略做一个简短的描述：

MatDialog滚动策略

.cdk-global-scrollblock组件具有选项MatDialog（类型scrollStrategy），该选项确定用于对话框的滚动策略，如https://material.angular.io/components/dialog/api#MatDialogConfig

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

MatDialogConfig

默认情况下，scrollStrategy: this.overlay.scrollStrategies.block()将使用MatDialog策略，如在源code中发现的那样。

其他可用策略是block，noop和reposition-如here所述。

`close` CSS类

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

可以在html类的here中找到源代码。我将在此处复制一些代码：

BlockScrollStrategy

解决方案

1。真正的问题在于您的CSS 。

请确保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');的值不正确，所以请仔细检查添加到this._previousScrollPosition和html标记中的css规则。

我可以通过使用以下CSS复制您的问题：

body

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

这可以通过删除html, body { min-height: 100%; height: 100%; } body { overflow: auto; }来解决。

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

如果您确实需要body { overflow: auto; }和html来获取100％的视口，即使内容较小，请使用以下CSS：

body

OR

2。设置html { height: 100%; } body { min-height: 100%: }滚动策略：

noop

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

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

Answer 7

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

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

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

Answer 8

要删除空白的白纸背景，可以使用任何一种CSS：

.cdk-global-scrollblock{
    height: auto
  }

or

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

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

8 个答案:

MatDialog滚动策略

`close` CSS类

解决方案

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

8 个答案:

MatDialog滚动策略

close CSS类

解决方案

`close` CSS类