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被添加到 app 模块中。：

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

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

可能是什么问题呢？

Answer 1

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

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

ivy：使 Hammer 支持摇树。 以前，在 Ivy 应用程序中，默认情况下包含 Hammer 提供程序。 通过此提交，需要 Hammer 支持的应用程序必须在其根模块中导入HammerModule 。 （ #32203 ）（ de8ebbd ）

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

Answer 2

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

按此顺序将它们全部移至 app.module.ts...

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

如果您将它用于滑动，例如旋转木马，则需要导出自定义类...

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}

它应该在控制台中出现一个警告...

已弃用：DI 正在实例化一个令牌“MyHammerConfig”，该令牌继承了其 @Injectable 装饰器，但本身不提供。 这将成为 v10 中的错误。 请将@Injectable() 添加到“MyHammerConfig”类。

如果有人对上述代码有任何建议，我仍在努力解决这个问题。

Answer 3

升级到 Angular 9 后，我不得不重新 npm- hammerjs因为它已从我的package.json删除。 我会检查你的是否还在那里。