角材料滑块不滑动

Question

我使用的是mat-slider，并且尝试使用鼠标滑动控件时，它无法左右滑动。仅当我单击滑线中的某个点时，它才起作用。 我的代码是

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

Answer 1

在Angular 9上，安装Hammer JS对我来说很有效。

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

Answer 2

我认为您应该在项目中安装HammerJS：

npm install hammerjs

Hammer是一个开源库，可以识别由触摸，鼠标和pointerEvents做出的手势。

在HammerJS上查看Angular Material documentation。

  

某些组件（mat-slide-toggle，mat-slider，matTooltip）依靠HammerJS进行手势。为了获得这些组件的完整功能集，必须将HammerJS加载到应用程序中。

没有HammerJS的演示：

Answer 3

找到答案here。基本上，我在MaterialModule

之后导入了BrowserAnimationsModule

Answer 4

对于那些使用延迟加载的用户，请先导入以下内容：

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

然后将其放在根应用模块中：

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

检查this issue以获得更多信息

Answer 5

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

安装

npm install hammerjs

导入main.ts文件

import 'hammerjs';

Answer 6

您可能已经在应用程序模块中安装并导入了Hammerjs，也许对您不起作用。

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

注意：请勿评论。

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