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 演示，它按预期工作：滑块在鼠标移动时移动，而不是在释放鼠标时跳跃。

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

Answer 1

即使在按照Step 2 Set Up Hammer JsSupport 安装了hammerjs 之后，对我也不起作用。

HammerJS 提供了一些组件（mat-slide-toggle、mat-slider、matToolTip）所需的手势识别能力。

...

NPM

npm install --save hammerjs

纱线

yarn add hammerjs

安装后，将其导入应用的入口点（例如 src/main.ts）。

import 'hammerjs';

不过，我终于在github上的issues中找到了a comment，基本解决了：

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

在 polyfills.ts 中导入：import 'hammerjs';

如果这不起作用，您可能会发生其他事情。您还应该确保在您的 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

providers: [{ 提供: HAMMER_GESTURE_CONFIG, useClass: GestureConfig }]

Answer 4

我遇到了值未更新的相关问题，将 (change) 与 (input) 事件区分开来是诀窍。

Answer 5

在 MaterialModules 之前导入 BrowserAnimationsModule 时我也遇到了同样的问题。

Answer 6

在此处打开的问题中找到答案https://github.com/angular/components/issues/17420

使用 Angular 9 及更高版本，您应该在此导入的同时导入 HammerModule

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

imports: [
...
BrowserAnimationsModule,
BrowserModule,
MatSliderModule,
HammerModule,
]

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