MatSelect 打开时如何滚动底层 MatDialog？

Question

在常规页面中打开MatSelect 时，可以通过MAT_SELECT_SCROLL_STRATEGY 注入令牌自定义滚动行为，并使用NoopScrollStrategy 滚动底层页面，同时保持MatSelect 就位.

但是，当从MatDialog 打开MatSelect 时，MAT_SELECT_SCROLL_STRATEGY 完全没有效果，我无法滚动底层MatDialog。

我创建了一个Stackblitz 来演示这个问题。

一种解决方法是使用pointer-events: none 设置backDropClass，但是当我单击它时它也会禁用关闭行为，我想保留它。如果可能的话，我还想避免基于z-index 的黑客攻击。

Answer 1

我曾尝试在使用纯 css 单击外部菜单时关闭 matSelect，但无法找到方法。所以我不得不在 ts 文件中进行代码更改。

我在这里编辑了你stackblitz，它似乎正在工作。请验证..

在您的全局 style.css/scss 文件中添加以下代码将允许您在 matselect 打开时滚动对话框，并且还可以在外部单击时关闭对话框：

.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  pointer-events: none;
}

.cdk-overlay-dark-backdrop {
  pointer-events: auto !important;
}

要在菜单外单击时关闭 matSelect，必须更改 .ts 代码。请参考 stackblitz 链接。