打开 Angular Material 对话框会使父显示褪色？

【问题标题】：Opening Angular Material dialog makes the parent display fade?打开 Angular Material 对话框会使父显示褪色？
【发布时间】：2020-10-13 13:53:46
【问题描述】：

我正在我的项目中实现 Angular Material Dialog。它正在工作，但是，当我打开对话框时，我的另一个屏幕（调用对话框的父组件）会在后台消失。看图，背景不显示页面内容。

我想实现它，就像它在角度材料网站中显示的那样，其中背景是可见的。（见图）

我不明白这个问题，因为我已经按照网站中的描述实现了它。

【问题讨论】：

控制台有错误吗？你能显示你的代码吗？如果您确实喜欢 Material，那么它应该可以工作 like this
可以提供body css吗？
@Emilien 不，控制台中没有错误。是的，我确实按照网站上的示例以及 stackblitz 中的建议使用了它
@VladimirBozhinovski 我没有为对话框提供任何 CSS
提供的答案解决了我的问题。谢谢:)

标签： angular angular-material

【解决方案1】：

尝试将 noopscrollstrategy 添加到对话框引用中：

const dialogRef = this.dialog.open(DialogComponent, {
        width: '250px',
        data: { some data },
        scrollStrategy: new NoopScrollStrategy() // add this line
    });

别忘了导入

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

如果这不起作用，请尝试添加 css：

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

如果你想了解 NoopScrollStrategy 在幕后做了什么，请阅读文档：https://material.angular.io/cdk/overlay/api

愉快的编码

【讨论】：

它使用滚动策略工作：新的 NoopScrollStrategy() 谢谢