角材料垫滑块无法与 Hammer.js 一起正常工作答案

【问题标题】：Angular material mat-slider not working properly with Hammer.js角材料垫滑块无法与 Hammer.js 一起正常工作
【发布时间】：2020-04-04 08:32:47
【问题描述】：

我被困了一段时间，所以分享这个（正如在 SO 上积极鼓励的那样）以防其他人面临同样的问题。

问题

在 Angular 中，当创建自定义 Hammer.js 配置以防止其阻塞垂直页面滚动并且您使用 Angular Material mat-slider 时，您可能会发现滑块动作不顺畅，或者允许拖动滑块。

如果和我一样，你遵循了网上的建议，你可能在 app.module.ts 中创建了一个自定义的 Hammer 配置，如下所示：

export class MyHammerConfig extends HammerGestureConfig {
  buildHammer(element: HTMLElement) {
    const mc = new Hammer(element, {
    touchAction: 'pan-y'
  });

  return mc;
 }
}

使用提供者声明：

{provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig}

上述配置确保 Hammer 仅处理水平滑动，允许垂直滑动事件到达浏览器以上下滚动页面。
但是，如果您碰巧使用了 Angular Material mat-slider，那么自定义 Hammer 配置类可能会导致滑块操作出现问题。

如前所述，我将在下面回答我自己的问题。

使用的版本：
角 8.0.0
角度材质 8.0.0

【问题讨论】：

标签： angular angular-material hammer.js

【解决方案1】：

要在使用自定义 Hammer 配置时解决 Angular Material mat-slider 的问题，您只需从 GestureConfig 类从“angular/material”扩展，而不是HammerGestureConfig：

import { GestureConfig } from '@angular/material';

export class MyHammerConfig extends GestureConfig  {
  buildHammer(element: HTMLElement) {
    return new GestureConfig({touchAction: 'pan-y'}).buildHammer(element);
  }
}

这应该对滑块问题进行排序。

感谢在 Github 上发帖：
https://github.com/angular/components/issues/4278#issuecomment-399572805

【讨论】：