Tengo la aplicación Angular 12 .
Hay carrusel con imágenes, que son enlaces . Integré Hammer JS como se esperaba:
import * as Hammer from 'hammerjs'; export class HammerConfig extends HammerGestureConfig { overrides = { swipe: { direction: Hammer.DIRECTION_ALL }, }; } @NgModule({ declarations: [AppComponent], imports: [ ... ], providers: [ { provide: HAMMER_GESTURE_CONFIG, useClass: HammerConfig, }, ], bootstrap: [AppComponent], }) export class AppModule {}Aplico controladores de eventos Hammer en el elemento contenedor Carrusel de esta manera:
<div class="slides" (swipeleft)="swipeLeft($event)" (swiperight)="swipeRight($event)" (tap)="tap($event)" [style.touch-action]="'pan-y'" > Y aquí viene el tema. Intentar deslizar un enlace conduce al comportamiento de arrastre predeterminado. La imagen también provoca un comportamiento de arrastre predeterminado similar. Una solución para eso es agregar la regla css para los elementos <img> y <a> dom:
img, a { pointer-events: none; } La función de deslizar para deslizar los paneles del carrusel funciona, pero ahora el evento de hacer clic/tocar no funciona debido pointer-events: none;
Sé que hay una configuración de Hammer con la siguiente interfaz:
class HammerGestureConfig { events: string[] overrides: {...} options?: {...} buildHammer(element: HTMLElement): HammerInstance }Mi pregunta es : ¿es posible aplicar una configuración específica y reglas css para deslizar y hacer clic/tocar los paneles de enlace del carrusel?
Gracias de antemano.
tal vez no sea tan relevante, pero aún así es una solución para este caso.
Entonces, como resumen rápido del caso:
-1- Tengo un carrusel de imágenes.
-2- Quiero deslizar el carrusel horizontalmente.
-3- Quiero desplazar la página verticalmente si coloco el "dedo" sobre el carrusel.
-4- Quiero hacer clic/tocar en algún panel de carrusel y navegar por el enlace dedicado.
El problema fue con el punto 4-th . Para deslizar el dedo sobre el enlace/imágenes , tuve que aplicar la regla css :
img, a { pointer-events: none; }Y eso impedía la navegación cuando se hacía clic en el panel/enlace/imagen .
Entonces, una solución es activar la navegación programática en angular usando:
this.router.navigate(['some_route']) // or this.router.navigateByUrl('/some_route') Por supuesto, la información se obtiene al tap event con la información de event.target . Por supuesto, podría haber otras soluciones más inteligentes. Pero, al menos, este enfoque está funcionando de manera muy consistente.