HammerJs：通過水平滑動啟用垂直滾動

Question

我有一個 angular 7 網站，我想將水平滑動添加到一個組件，並將垂直滑動添加到另一個（組件在同一模塊中）。 我為此使用了hammerjs。

默認情況下，hammerjs 禁用垂直滑動，所以我使用下面的代碼啟用了所有方向的滑動。

export class MyHammerConfig extends HammerGestureConfig
{
  overrides = <any>{
    swipe: {direction: Hammer.DIRECTION_ALL},
  };
}

//declare provider in AppModule
providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: MyHammerConfig
    }
]

問題是垂直滾動在水平滑動的組件上不起作用。 從我讀過的內容來看，解決方案是在組件中添加touch-action: pan-y水平滑動。

但是，這適用於 chrome，但 safari 無法識別touch-action屬性。

我的想法是在組件級別為HAMMER_GESTURE_CONFIG聲明多個提供程序：

• 在具有水平滑動的組件上，使用僅允許水平滑動的提供程序
• 在另一個，只啟用垂直滑動

但是，組件級提供程序似乎沒有考慮我的提供程序。

這是我試圖用來僅啟用水平滑動的一些代碼

export class HorizontalHammerConfig extends HammerGestureConfig
{
  overrides = <any>{
    swipe: {Hammer.DIRECTION_HORIZONTAL},
    pinch: {enable: false},
    rotate: {enable: false}
  };
}

//Component declaration
@Component({
  ...

  providers:[
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: HorizontalHammerConfig
    }],

任何的想法？

編輯：這是一個演示該問題的stackblitz 示例。 組件級提供程序被忽略。

Answer 1

我在那里找到了解決方案。

基本上，自定義配置必須覆蓋buildHammer類，因此可以根據上下文使用不同的hammerjs 選項。

app.module.ts

export class MyHammerConfig extends HammerGestureConfig
{
  overrides = <any>{
    swipe: {direction: Hammer.DIRECTION_ALL},
  };

  buildHammer(element: HTMLElement)
  {
    let options = {};

    if (element.attributes['data-mc-options'])
    {
      try
      {
        options = JSON.parse(element.attributes['data-mc-options'].nodeValue);
      }
      catch (err)
      {
        console.error('An error occurred when attempting to parse Hammer.js options: ', err);
      }
    }

    const mc = new Hammer(element, options);


    // retain support for angular overrides object
    for (const eventName of Object.keys(this.overrides))
    {
      mc.get(eventName).set(this.overrides[eventName]);
    }

    return mc;
  }
}

然后，在組件模板中，將額外選項作為 json 字符串傳遞。

組件.html

<div (swipeleft)="onSwipeLeft()" data-mc-options='{ "touchAction": "pan-y" }'">
</div>

這適用於野生動物園/iOS