mat-slider:拖动时不立即更新

Question

我在Angular 5应用程序中使用@ angular/material.我使用的Angular Material的版本是5.0.2.我正在使用@ angular/animations 5.1.2.

我有一个非常简单的滑块用例,如下所示:

<mat-slider style="width:100%;"></mat-slider>

但由于某种原因,拖动滑块手柄时,在释放鼠标之前它不会移动到新位置,这显然不是很好.我已经检查了Material demo并且按预期工作:滑块在鼠标移动时移动,并且在释放鼠标时不会跳转.

任何人都可以建议为什么会发生这种情况？工作中永远不会通过AC!

Answer 1

即使在按照步骤5手势支持安装hammerjs之后,也没有为我工作.终于在github的问题上找到了解决它的评论,基本上:

import { BrowserModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { GestureConfig } from '@angular/material';

providers: [
    { provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig },
]

在root.module.ts中.

Answer 2

我有同样的问题,通过在polyfills.ts中导入hammerjs来修复

npm install hammerjs --save添加"import'shamjs';" 到polyfills.ts.

如果这不起作用,您可能还会有其他事情发生.您还应确保在app.module.ts中导入"BrowserAnimationsModule"

Answer 3

他们的几个设置需要完成以在材料设计中添加手势控制

1. 安装hammerjs npm install hammerjs --save
2. 安装hammerjs类型 npm install @ types/hammerjs --save-dev

3. 在 main.ts 上导入hammerjs

   导入'hammerjs'；

   从“@angular/core”导入 { enableProdMode };

4. 覆盖 AppModule.ts 中的 GestureConfig

提供者：[{提供：HAMMER_GESTURE_CONFIG，useClass：GestureConfig}]