Angular 9从不调用HammerGestureConfig.buildHammer方法

Question

更新至 Angular 9 后，无法再使用 Hammer.js。我们已按以下方式扩展了 Angular 的 HammerGestureConfig：

import {HammerGestureConfig} from '@angular/platform-browser';
import {Injectable} from '@angular/core';

@Injectable({providedIn: 'root'})
export class HammerConfig extends HammerGestureConfig {

  overrides = <any>{
    'pan': {
      direction: Hammer.DIRECTION_ALL,
      threshold: 5
    } // override default settings
  };

  buildHammer(element) {
    const recognizers = [];
    if (element.hasAttribute('data-hammer-pan')) {
      recognizers.push([Hammer.Pan]);
    }
    if (element.hasAttribute('data-hammer-pan-x')) {
      recognizers.push([Hammer.Pan, {direction: Hammer.DIRECTION_HORIZONTAL}]);
    }
    if (element.hasAttribute('data-hammer-tap')) {
      recognizers.push([Hammer.Tap]);
    }
    if (element.hasAttribute('data-hammer-pinch')) {
      recognizers.push([Hammer.Pinch]);
    }
    if (element.hasAttribute('data-hammer-rotate')) {
      recognizers.push([Hammer.Rotate]);
    }
    if (element.hasAttribute('data-hammer-press')) {
      recognizers.push([Hammer.Press]);
    }
    if (element.hasAttribute('data-hammer-swipe')) {
      recognizers.push([Hammer.Swipe]);
    }
    const hammer = new Hammer.Manager(element, {
      recognizers: recognizers,
      touchAction: 'auto'
    });
    return hammer;
  }
}

HammerConfig被添加到应用程序模块中。

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

据我了解，应该调用buildHammer方法，但它从未被调用。

可能出现了什么问题？

- BuZZ-dEE

Answer 1

需要将HammerModule导入到Angular应用模块中。

  imports: [
    ...
    HammerModule
  ],
  providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: HammerConfig
    },
    ...
  ],
  ...

ivy: 使 Hammer 支持 Tree-shakable。以前，在 Ivy 应用程序中，默认情况下包括了 Hammer providers。通过这个提交，想要 Hammer 支持的应用程序必须在它们的根模块中导入 HammerModule。（#32203）（de8ebbd）

https://github.com/angular/angular/blob/9.0.0/CHANGELOG.md

- BuZZ-dEE

---

已测试通过 Angular 11。 - Alsushi

Answer 2

请将可能在您的main.ts文件中添加的任何hammerjs导入注释掉，这些导入可能是在Angular 8或更早版本中添加的 - 对我来说，最初是一个2年前的Angular 4项目，我们已经发展了很多。但是Angular 9无法在那里使用它。

按照以下顺序将它们全部移到app.module.ts中...

import { HammerModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
declare var Hammer: any;

如果您要将它用于轮播等滑动操作，则需要导出自定义类...

@Injectable()
export class MyHammerConfig extends HammerGestureConfig {
  overrides = <any>{
    pan: { direction: Hammer.DIRECTION_All },
    swipe: { direction: Hammer.DIRECTION_VERTICAL },
  }

  buildHammer(element: HTMLElement) {
    const mc = new Hammer(element, {
      touchAction: 'auto',
      inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
      recognizers: [
        [
          Hammer.Swipe,
          {
            direction: Hammer.DIRECTION_HORIZONTAL,
          },
        ],
      ],
    })
    return mc
  }
}

然后在@NgModule中。

@NgModule({
// ...
   imports: [
      HammerModule,
      // ...

不要忘记供应商...

providers: [
 {provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig}
  // ...
] 

它应该可以运行。

- AppDreamer

---

你找到解决这个错误的方法了吗？“DEPRECATED：DI正在实例化一个令牌“MyHammerConfig”，该令牌继承其@Injectable装饰器，但本身没有提供。在v10中，这将成为一个错误。请向“MyHammerConfig”类添加@Injectable()。” - J.F.

我找到了解决方案。实际上，错误信息非常清晰：只需在类“MyHammerConfig”上添加“@Injectable()”。不要忘记添加：import { Injectable } from '@angular/core'; - J.F.

Answer 3

升级到Angular 9后，我不得不重新npm安装hammerjs，因为它已从我的package.json中删除。建议您检查一下您的是否还在。

- Adam Dunkerley

---

如果已安装，您可能需要引用此链接... https://levelup.gitconnected.com/making-hammerjs-work-with-angular-9-81d289159320 - Adam Dunkerley