angular-material2 - 角 Material 选择打开时禁用滚动

Question

默认情况下，角度 Material 的 select-dropwon 将允许页面相应地滚动和重新定位。

在 Material 文档的原始页面上，选择下拉菜单显示了不同的行为:它在打开时阻止滚动:

https://material.angular.io/components/select/overview

我怎样才能实现这种行为？单击选择时，我没有找到任何选项或切换以禁用滚动

编辑:
我确实发现有一个叫做“mat-select-scroll-strategy”的东西，但它没有在任何地方记录。谁能给我一个提示如何使用它？

Answer 1

由于 mat-select 组件通过 DI 注入(inject)策略，因此您可以在组件中提供替代方案(或在模块级别，如果您愿意)。

import { MAT_SELECT_SCROLL_STRATEGY } from '@angular/material';
import { Overlay, BlockScrollStrategy } from '@angular/cdk/overlay';

export function scrollFactory(overlay: Overlay): () => BlockScrollStrategy {
  return () => overlay.scrollStrategies.block();
}

// ...

providers: [
  { provide: MAT_SELECT_SCROLL_STRATEGY, useFactory: scrollFactory, deps: [Overlay] }
]

--

STACKBLITZ