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

Question

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

但是，当从MatSelect打开MatDialog时， 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链接。