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，但从未调用过。

可能是什么问题？

Answer 1

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

Answer 2

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

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

ivy: make Hammer support tree-shakable. Previously, in Ivy applications, Hammer providers were included by default. With this commit, apps that want Hammer support must import HammerModule in their root module. (#32203) (de8ebbd)

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

Answer 3

注释掉可能在 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;

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

@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}
  // ...
]

应该可以。

Angular 9 从不打电话 HammerGestureConfig.buildHammer

Angular 9 never calls HammerGestureConfig.buildHammer

hammer.js

angular

angular9