垫滑块:拖动后不会立即更新 [英] mat-slider: not updating immediately on drag

问题描述

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

I am using @angular/material in my Angular 5 app. The version of Angular Material I am using is 5.0.2. I am using @angular/animations 5.1.2.

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

I have a very simple use case of the slider, like this:

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

但是由于某些原因，在拖动滑块手柄时，直到释放鼠标后它才会移动到新位置，这显然不是很好.我已经检查了Material演示，并且可以按预期工作:滑块随着鼠标移动而移动，并且在释放鼠标时不只是跳动.

but for some reason, when dragging the slider handle, it does not move to its new position until the mouse is released, which is obviously not very good. I have checked the Material demo and that works as expected: the slider moves on mouse move, and doesn't just jump when the mouse is released.

有人可以建议为什么会这样吗?永远不会在工作中通过交流！

Can anyone suggest why this might be happening? It'll never pass AC at work!

推荐答案

即使按

HammerJS提供某些组件(mat-slide-toggle，mat-slider，matToolTip)所需的手势识别功能.

HammerJS provides gesture recognition capabilities required by some components (mat-slide-toggle, mat-slider, matToolTip).

...

NPM

npm install --save hammerjs

纱线

yarn add hammerjs

安装后，将其导入应用程序的入口点(例如src/main.ts).

After installing, import it on your app's entry point (e.g. src/main.ts).

import 'hammerjs';

但是，我终于在github上的问题中找到了评论解决了它，基本上是:

However, I finally found a comment in the issues on github that solved it, basically:

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

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

在root.module.ts中.

in root.module.ts.

这篇关于垫滑块:拖动后不会立即更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！