Angular2:HammerJS轻扫以获取md-tab-group [英] Angular2: HammerJS swipe for md-tab-group

问题描述

我已经在 Angular2 网络应用中实现了 HammerJS ，并且还测试了

I've implemented HammerJS in my Angular2 webapp and I've also tested the example code out. This code uses an Array of objects and seems to work flawlessly. However, I've been trying to implement the same system for @angular2-material/tabs. Therefore I have a <md-tab-group> with multiple <md-tab>'s which should swipe from tab to tab. Problem is that I can't even trigger the swipe function.

HTML文件:

<md-tab-group md-stretch-tabs [(selectedIndex)]="selectedIndex" (selectedIndexChange)="selectChange()">
      <div class="swipe-box" (swipeleft)="swipe(idx, $event.type)" (swiperight)="swipe(idx, $event.type)">
        <md-tab>
           (...) //Content Tab 1
        </md-tab>
        <md-tab>
           (...) //Content Tab 2
        </md-tab>
      </div>
</md-tab-group>

在示例中可以看到，*ngFor的用法与*ngFor="let avatar of avatars; let idx=index"一样，用于滑动框-<div>.但是由于我是从<md-tab-group>获取索引的，所以它似乎不是必需的，即使包含了它，也不会触发我的事件，但是我的<md-tab>-内容却被隐藏了.因此，我忽略了它.我确实在函数中保留了idx参数，因为滑动方法需要一个数字(第二个参数是可选的). 文档

In the example can be seen that *ngFor is used like *ngFor="let avatar of avatars; let idx=index" for the swipe-box-<div>. But since I'm getting my index from the <md-tab-group> it doesn't seem neccesary and even when I include it, my event isn't triggered but my <md-tab>-content becomes hidden. Therefore I left it out. I did leave the idx parameter in the function because the swipe method expects a number (second parameter is optional). Documentation

对于TypeScript文件，我实现了以下代码(某些代码可能不起作用，但由于未调用swipe方法而无法对其进行测试).

For the TypeScript-file I've implemented the following code (some code might not work but haven't been able to test it since the swipe method doesn't get called).

TS文件:

export class HomeComponent {

  selectedIndex: number = 1;

  selectChange(): void{
    console.log("event triggered INDEX: " + this.selectedIndex);
  }

  SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' };

  // Action triggered when user swipes
  swipe(selectedIndex: number, action = this.SWIPE_ACTION.RIGHT) {
    console.log("swiped"); //DOES NOT GET TRIGGERD
    // Out of range
    if (selectedIndex < 0 || selectedIndex > 1 ) return;

    let nextIndex = 0;
    // Swipe right, next tab
    if (action === this.SWIPE_ACTION.RIGHT) {
      const isLast = selectedIndex === 1;
      nextIndex = isLast ? 0 : selectedIndex + 1;
      console.log("swipe right");
    }

    // Swipe left, previous tab
    if (action === this.SWIPE_ACTION.LEFT) {
      const isFirst = selectedIndex === 0;
      nextIndex = isFirst ? 1 : selectedIndex - 1;
      console.log("swipe left");
    }
  }
}

HammerJS的实时演示 是的，我已经实现了index.html

Live demo of what HammerJS does and yes, I've implemented the script needed in the index.html

<!-- Hammer JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>

推荐答案

问题似乎是在错误的<div>中使用了滑动事件.该事件需要在父级 <div>中触发.这是工作代码:

The problem appeared to be that the swipe-event is used in the wrong <div>. The event needs to be triggered in the parent <div>. here's the working code:

HTML文件:

<div class="md-content" flex md-scroll-y (swipeleft)="swipe(idx, $event.type)" (swiperight)="swipe(idx, $event.type)">
   <md-tab-group md-stretch-tabs [(selectedIndex)]="selectedIndex" (selectedIndexChange)="selectChange()">
           <md-tab>
              (...) //Content Tab 1
           </md-tab>
           <md-tab>
              (...) //Content Tab 2
           </md-tab>
   </md-tab-group>
</div

TS文件:

export class HomeComponent {

  selectedIndex: number = 1;

  selectChange(): void{
    console.log("Selected INDEX: " + this.selectedIndex);
  }

  SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' };

  // Action triggered when user swipes
  swipe(selectedIndex: number, action = this.SWIPE_ACTION.RIGHT) {
    // Out of range
    if (this.selectedIndex < 0 || this.selectedIndex > 1 ) return;

    // Swipe left, next tab
    if (action === this.SWIPE_ACTION.LEFT) {
      const isLast = this.selectedIndex === 1;
      this.selectedIndex = isLast ? 0 : this.selectedIndex + 1;
      console.log("Swipe right - INDEX: " + this.selectedIndex);
    }

    // Swipe right, previous tab
    if (action === this.SWIPE_ACTION.RIGHT) {
      const isFirst = this.selectedIndex === 0;
      this.selectedIndex = isFirst ? 1 : this.selectedIndex - 1;
      console.log("Swipe left - INDEX: " + this.selectedIndex);
    }
  }
}

这篇关于Angular2:HammerJS轻扫以获取md-tab-group的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！