angular - 如何在 Angular 9 中使用 Hammer.js 保持垂直滚动和缩放并检测水平和对 Angular 线平移/滑动？

Question

我想要什么

…是在 Angular 9 中使用 Hammer.js 检测平移(或滑动)。

它应该像这样工作:

• 应检测水平平移
• 应检测到一定程度的对 Angular 线平移¹
• 不应阻止垂直滚动
• 不应阻止双指缩放，因为这会导致可访问性问题

在图片中，green 显示了浏览器默认的所有内容，不应阻止。 blue 显示了所有应该由 Hammer 阻止和处理的内容。

不确定我的意思？看看 Swiper 的演示。 They work exactly like this .

_{¹ 很清楚如何使用event.angle检测 Angular 。但我不确定如何在必要时区分阻止或不阻止事件。}

我尝试过的

……这些都是我在 Stackoverflow 和其他博客文章上的 multipee 问题上发现的:

import { BrowserModule, HammerModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import * as Hammer from 'hammerjs';

class MyHammerConfig extends HammerGestureConfig {
  // Test #1
  overrides = <any>{
    swipe: { direction: hammer.DIRECTION_HORIZONTAL },
    pinch: { enable: false },
    rotate: { enable: false }
  };

  // Test #2
  overrides = <any>{
    swipe: { direction: Hammer.DIRECTION_ALL  }
  };

  // Test #3
  options = {
    domEvents: true
  }

  // Test #4
  buildHammer(element: HTMLElement) {
    const mc = new Hammer(element, {
      touchAction: 'pan-y'
    });

    return mc;
  }

  // Test #5
  buildHammer(element: HTMLElement) {
    const mc = new Hammer(element, {
        touchAction: 'auto'
     });

     return mc;
  }
}

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HammerModule
  ],
  providers: [
    {
      provide: Window,
      useValue: window
    },
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: MyHammerConfig
    }
  ],
  bootstrap: [
    AppComponent
  ]
})

export class AppModule { }

所有这些都不起作用，因为它们有不同的结果并且在不同的设备(例如 iPhone 与 iPad)之间不一致:

• ✗ 双指缩放无效
• ✗ 垂直滚动不起作用
• ✗ 无法检测到对 Angular 线平移

目前的解决方案

... 直接在组件中创建 Hammer，如下所示:

import { Component, OnInit, ViewChild, ElementRef, OnDestroy, ViewChildren, QueryList } from '@angular/core';

import * as Hammer from 'hammerjs';

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.scss']
})

export class HeroComponent implements OnInit, OnDestroy {
  @ViewChild('list', { static: true }) list: ElementRef;

  private hammertime: Hammer;
  private isLocked: boolean = false;

  ngOnInit() {
    this.initHammer();
  }

  ngOnDestroy() {
    // todo destroy hammertime
  }

  initHammer(): void {
    this.hammertime = new Hammer(this.list.nativeElement, {touchAction : 'auto'});
    this.hammertime.get('pan').set({ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 60 });
    this.hammertime.on('panleft panright', event => {
      if (this.isLocked || event.maxPointers !== 1) {
        return
      };

      this.goto(event.type === 'panLeft' ? 'next' : 'prev');
      this.isLocked = true;

      setTimeout(() => this.isLocked = false, 1000)
    });
  }
}

这做了很多事情:

• ✓ 双指缩放
• ✓ 垂直滚动有效
• ✓ 检测到水平滑动

但这些东西不起作用或不好:

• ✗ 不使用 HammerModule 而不是 Angular 方式
• ✗ 没有对 Angular 线检测
• ✗ Hammer - 实例 this.hammertime 和附加事件永远不会被销毁
• ✗ 超时用于防止 pan 事件多次触发
• ✗ 指针计数必须手动检测

有问题吗？

• 我怎样才能使这项工作“以 Angular 方式”进行？
• 如何检测对 Angular 线平移？
• 当无法以“Angular 方式”实现目标时，如何正确销毁 this.hammertime？

Answer 1

另一种方法

… 使用 ZingTouch正如 Graham Ritchie 所提议的那样.

它做了所有这些事情:

• ✓ 检测到水平和对 Angular 线平移
• ✓ 不阻止垂直滚动
• ✓ 缩放应该不会被阻止

新的解决方案

import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';

import ZingTouch from 'zingtouch';

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.scss']
})

export class HeroComponent implements OnInit, OnDestroy {
  @ViewChild('list', { static: true }) list: ElementRef;

  private zingTouchRegion: ZingTouch.Region;
  private isLocked: boolean = false;

  ngOnInit() {
    this.initZingTouch();
  }

  ngOnDestroy() {
    this.zingTouchRegion.unbind(this.list.nativeElement);
  }

  initZingTouch(): void {
    const area = this.list.nativeElement;
    const gesture = new ZingTouch.Pan({threshold: 10});

    this.zingTouchRegion = new ZingTouch.Region(area, false, false);
    this.zingTouchRegion.bind(area, gesture, event => {
      const angle = event.detail.data[0].directionFromOrigin;

      if ((angle >= 40 && angle <= 140) || (angle >= 220 && angle <= 320)) {
        return;
      }

      event.detail.events[0].originalEvent.preventDefault();

      if (this.isLocked) {
        return
      };

      if (angle > 140 && angle < 220) {
        this.goto('next');
      }

      if (angle > 320 || angle < 40) {
        this.goto('prev');
      }

      this.isLocked = true;
      setTimeout(() => this.isLocked = false, 600)
    });
  }
}