Angular material 滑块不滑动

Question

我正在使用 mat-slider 并且在尝试使用鼠标滑动控件时，它不会向左或向右滑动。它仅在我单击滑动线中的某个点时才起作用。我的代码是：

<div>
    <mat-slider></mat-slider>
</div>

Answer 1

我认为您应该将 HammerJS 安装到您的项目中：

npm install hammerjs

Hammer 是一个开源库，可以识别触摸、鼠标和指针事件做出的手势。

看看 HammerJS 上的 Angular Material documentation。

Some components (mat-slide-toggle, mat-slider, matTooltip) rely on HammerJS for gestures. In order to get the full feature-set of these components, HammerJS must be loaded into the application.

没有 HammerJS 的演示：

Answer 2

找到答案here。基本上我在 BrowserAnimationsModule

之后导入了 MaterialModule

Answer 3

对于那些使用延迟加载的人，首先导入这个：

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

然后，将其放入根应用程序模块中：

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

查看this issue了解更多信息

Answer 4

我知道我来晚了，但是如果有人在使用最新版本的 material(8.2.1) 时偶然发现了这个问题，您需要安装 hammerjs 并将其导入到您的 main.ts 文件中，使用下面的命令

安装

npm install hammerjs

导入 main.ts 文件

import 'hammerjs';

Answer 5

在 Angular 9，安装 Hammer JS 对我有用，正如其他人所说的那样。

npm install hammerjs
将其添加到 app.module - imports: [..., HammerModule]

Answer 6

您可能已经在应用程序模块中安装并导入了 Hammerjs，但它可能不适合您。

在 polyfills.ts 文件中验证您是否导入了 hammersjs 和 @angular/animations。此文件位于 src/polyfills.ts 中。打开它，如果找不到以下代码，请将其粘贴到polyfills.ts文件中。

注意：不应该评论，眼睛。

import 'hammerjs';
import '@angular/animations';

Answer 7

Angular Material 14:

你不需要 HammerJS
如果您使用 lazy-loading
您不需要任何手势配置
如果您使用 zone.js 标志，请确保“mousemove”不在 __zone_symbol__UNPATCHED_EVENTS

Angular material 滑块不滑动

Angular material slider not sliding

angular-material2

angular