如何使用Angular 9中的Hammer.js保持垂直滚动和缩放以及检测水平和对角平移/滑动？

Question

我想要的

…是使用Angular 9中的Hammer.js检测平移（或滑动）。

它应该像这样工作：

• 应检测到水平平移
• 应检测到一定程度的对角平移
• 不应防止垂直滚动
• 不应阻止捏放大，因为这会导致可访问性问题

在图像中，green显示了浏览器默认的所有内容，不应阻止。 blue显示了锤子应防止和处理的所有事情。

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

我尝试过的

…这些都是我在Stackoverflow和其他博客文章的多次提问中发现的所有内容：

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）上不一致：

]

• ✗缩放不起作用
• ✗垂直滚动不起作用
• 无法检测到对角平移

当前解决方案

…直接在组件中创建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的角度方式
• ✗没有对角线检测
• ✗Hammer实例this.hammertime和附加事件永不销毁
• ✗超时用于防止pan事件多次触发
• ✗指针计数必须手动确定

问题？

• 如何使这项工作成为“角度方式”？
• 如何检测对角线摇摄？
• 当不可能以“角度方式”实现目标时，如何正确销毁this.hammertime？

[我想要...是使用Angular 9中的Hammer.js检测平移（或滑动）。它应该像这样工作：应该检测到水平平移，对角平移应该达到一定程度……

Answer 1

替代方法