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

问题描述

我在我的 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.

谁能建议为什么会发生这种情况?它永远不会在工作中通过 AC！

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

推荐答案

对我不起作用，即使按照 第 2 步设置 Hammer JsSupport.

Wasn't working for me, even after installing hammerjs per Step 2 Set Up Hammer JsSupport.

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

...

NPM

npm install --savehammerjs

纱线

纱线添加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.

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