web-dev-qa-db-ja.com

Angular 9がHammerGestureConfig.buildHammerを呼び出すことはありません

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を呼び出す必要がありますが、呼び出されることはありません。

何が問題でしょうか？

angularhammer.jsangular9
2
BuZZ-dEE

Angular 9にアップグレードした後、package.jsonから削除されたため、hammerjsをnpm-installで再インストールする必要がありました。 。

0
Adam Dunkerley

Angular 8以前に追加された可能性が高いmain.tsファイルにある可能性が高い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}

コンソールで1つの警告が表示されるはずです...

非推奨：DIは@Injectableデコレーターを継承しますが、それ自体を提供しないトークン「MyHammerConfig」をインスタンス化しています。これはv10ではエラーになります。 "MyHammerConfig"クラスに@Injectable（）を追加してください。

上記のコードについて何か提案があれば、私はまだそれを修正するために取り組んでいます。

0
AppDreamer