当角度材质选择打开时禁用滚动

2023-12-25

默认情况下,角度材质的 select-dropwon 将允许页面滚动并相应地重新定位。

在材料文档的原始页面上,选择下拉列表显示了不同的行为:它在打开时阻止滚动:

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

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

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


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

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] }
]

--

堆栈闪电战 https://stackblitz.com/edit/material2-beta12-n3vcb1?file=app%2Fapp.component.ts

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

当角度材质选择打开时禁用滚动 的相关文章

随机推荐

  • 如何使用 JavaScript 屏蔽 HTML 输入?

    如何在 HTML 控件上使用 javascript 屏蔽美国电话 我希望输入强制文本采用以下格式 111 111 1111 这是我目前拥有的 mask str textbox loc delim var locs loc split for
  • 当我使用 jest 从模拟的 axios 调用返回一些响应时,未定义

    我正在尝试模拟 axios 调用并验证响应 但是当我记录模拟 axios 调用的响应时 我得到undefined 有人知道为什么吗 users js import axios from axios export default class
  • 无法连接到本地数据库

    我正在尝试运行一个 IIS 托管的应用程序 以电影数据库的形式 来自学如何设计一个 3 层架构程序 MVC 应用程序 WCF 服务 SQL Server DB 由于我没有完整 SQL Server 的许可证密钥 因此我决定使用 LocalD
  • 无法在 Ubuntu 11.04 上重新启动 mongodb

    我已经安装了 mongodb 当我输入以下命令时 我收到这些消息 root amila service mongodb status mongodb stop waiting root amila service mongodb resta
  • Android 模拟器 USB 直通失败:“‘usb-host’不是有效的设备型号名称”

    当我尝试使用 USB 直通时 如中所述https androidstudio googleblog com 2020 08 emulator 30024 canary html https androidstudio googleblog
  • Rails 秘密令牌

    我很困惑 Secret token 在 Rails 中的用途 谁能解释一下它的用途是什么 是否可以将此令牌放入公共源存储库并在生产中使用它 或者我应该在部署应用程序之前更改它以防止某些类型的攻击 回答我自己的问题 Secret token
  • 使用给定的post()时`io.restassured.internal.support.PathSupport`内的空指针

    我正在使用restAssured和Junit构建集成测试 并在调用以下代码时 private void login cookie given baseUri localhost 9000 when formParam username my
  • 带标题的 php POST 变量

    这是代码 header Location checkout transactionCompleted php id transactionId 然后我用 GET id 来获取该值 到目前为止 一切都很好 Question 我怎样才能通过发布
  • apachecamel简单表达式不给出字符串值

    我正在使用阿帕奇骆驼 我正在尝试使用简单的表达语言从身体中检索价值 我需要它作为字符串 但简单返回 SimpleBuilder 对象 所以我尝试过这样的事情 simple body address line resultType Strin
  • Next.js:如何从 getStaticProps 中获取静态资源

    我正在使用 Netlify CMS 我想将轮播的所有幻灯片导入到我的组件中 我制作了一个名为 滑块 的集合 并添加了一些幻灯片 这创建了两个 Markdown 文件 每张幻灯片一个 public content slider 我想将它们全部
  • asp:QueryStringParameter 和空查询字符串参数

    I haveasp GridView使用显示客户端请求asp SqlDataSource 我想限制客户端显示的信息 View aspx必须显示一切 View aspx client 1必须仅显示来自客户端 ID 1 的请求 所以我正在使用
  • Angular2如何在使用ng-for时设置元素类名称,仅在第一个元素上

    我已经建立了一个ul并且只想将课程设置为第一个li元素 我想设置class active 只在第一里 我确实将索引放入类属性中 但这不是我想要的 import Component View NgFor Inject forwardRef I
  • knitr 中 R markdown 的全局注释选项

    要更改输出的前导字符 Rmd 中的knitr 块有一个注释选项 例如 r comment 1 100 有没有办法在全局范围内设置它 而不是为每个块单独设置 opts knit set comment 不起作用 我在文档中找不到它 Use o
  • 向 NSTabviewitem 添加关闭按钮

    我有一个带有选项卡视图的应用程序 当用户单击菜单 例如 客户端数据 时 我以编程方式生成一个选项卡 现在我想对选项卡视图进行子类化 为每个 NSTabviewitem 添加一个关闭按钮 如果您没有答案 您可以帮助提供文档或示例代码 我知道这
  • 调用默认 Phonegap 返回按钮处理程序

    我有一个phonegap应用程序 需要我捕获后退按钮 这工作顺利 但是当我在主屏幕上并按下后退按钮时 我想调用原始事件处理程序并让应用程序关闭或通过这样的按下自然地执行平台上的任何操作 我知道我可以告诉应用程序退出 但我知道这对于 iPho
  • 如何设置.data节的对齐方式?

    我在中定义了以下变量 dataNASM 部分 section data var1 DD 12345 int 4 bytes var2 DB A char 1 byte padding1 DB 123 1 byte padding paddi
  • CORS Java服务器端实现

    我需要实施CORS http www w3 org TR cors基于 Jersey 的 REST 服务器的支持 我已经浏览了一些可用的material http software dzhuvinov com cors filter htm
  • 如何声明一个哈希函数以在命名空间内的 unordered_set 中使用?

    我已经成功创建了一个哈希函数 并且 override 用于自定义类 这样我就可以在unordered set 但是 理想情况下 我想在要使用的类附近为我的类定义模板专业化 这可以通过以下方法来完成 效果很好 class MyClass pu
  • 我如何知道 SQL 全文索引填充何时完成?

    我们正在为针对测试 SQL Server 数据库运行的 ASP NET 应用程序编写单元测试 也就是说 ClassInitialize 方法创建一个包含测试数据的新数据库 ClassCleanup 删除该数据库 我们通过从代码运行 bat
  • 当角度材质选择打开时禁用滚动

    默认情况下 角度材质的 select dropwon 将允许页面滚动并相应地重新定位 在材料文档的原始页面上 选择下拉列表显示了不同的行为 它在打开时阻止滚动 https material angular io components sel