Después de la actualización a Angular 9, ya no funciona para usar Hammer.js. Hemos ampliado Angular HammerGestureConfig de la siguiente manera:
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; } } El HammerConfig se agrega al módulo de la aplicación.:
providers: [ { provide: HAMMER_GESTURE_CONFIG, useClass: HammerConfig } ], Según tengo entendido, se debe llamar al método buildHammer , pero nunca se llama.
¿Cual podría ser el problema?
El HammerModule debe importarse al módulo de la aplicación Angular.
imports: [ ... HammerModule ], providers: [ { provide: HAMMER_GESTURE_CONFIG, useClass: HammerConfig }, ... ], ...hiedra: haz que el árbol de soporte de Hammer se pueda sacudir. Anteriormente, en las aplicaciones Ivy, los proveedores de Hammer se incluían de forma predeterminada. Con este compromiso, las aplicaciones que desean compatibilidad con Hammer deben importar
HammerModuleen su módulo raíz. ( #32203 ) ( de8ebbd )
Comente cualquier importación de hammerjs que probablemente esté en su archivo main.ts que probablemente se haya agregado en Angular 8 o antes; para mí, originalmente fue un proyecto de Angular 4 de 2 años que hemos evolucionado. Pero Angular 9 no puede usarlo allí.
Muévalos todos a app.module.ts en este orden...
import { HammerModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser'; declare var Hammer: any;Si lo está utilizando para deslizar, como para un carrusel, deberá exportar una clase personalizada...
@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 } }Luego en NgModule
@NgModule({ // ... imports: [ HammerModule, // ...no te olvides de los proveedores...
providers: [ {provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig} // ... ]Deberia de funcionar.
Después de actualizar a Angular 9, tuve que volver a instalar npm- hammerjs ya que se había eliminado de mi package.json . Comprobaría que el tuyo sigue ahí.