Angular 角度2:md选项卡组的HammerJS滑动

我已经在我的Angular2webapp中实现了HammerJS，我还测试了代码。这段代码使用了一个对象数组，看起来工作得很完美。然而，我一直在尝试为@angular2材质/选项卡实现相同的系统。因此，我有一个带有多个

的

，应该在选项卡之间滑动。问题是我甚至不能触发刷卡功能

HTML文件：

是的，我已经实现了index.html中所需的脚本

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

---

您需要的是每个选项卡上的滑动检测，而不是容器

  <div class="swipe-box">
    <md-tab (swipeleft)="swipe(1, $event.type)" 
            (swiperight)="swipe(1, $event.type)">
       (...) //Content Tab 1
    </md-tab>
    <md-tab (swipeleft)="swipe(2, $event.type)" 
            (swiperight)="swipe(2, $event.type)">
       (...) //Content Tab 2
    </md-tab>
  </div>

（…）//内容选项卡1
（…）//内容选项卡2

问题似乎是刷卡事件在错误的

中使用。事件需要在父级中触发。以下是工作代码：

HTML文件：

（…）//内容选项卡1
（…）//内容选项卡2
1）返回；
//向左滑动，下一个选项卡
if（action==此.swip_action.LEFT）{
const isLast=this.selectedIndex==1；
this.selectedIndex=isLast？0:this.selectedIndex+1；
log（“向右滑动-索引：+this.selectedIndex”）；
}
//向右滑动上一选项卡
if（action==此.swip\u action.RIGHT）{
const isFirst=this.selectedIndex==0；
this.selectedIndex=isFirst？1：this.selectedIndex-1；
log（“向左滑动-索引：+this.selectedIndex”）；
}
}
}

我编写了一个小指令来实现与您的代码相同的效果：

import { Directive, HostListener, EventEmitter, Input, Output } from '@angular/core';

@Directive({
  selector: '[swipeTab]'
})
export class SwipeTabDirective {

  @HostListener('swipeleft', ['$event'])
  onSwipeleft(event) {
    if(this.selectedIndex + 1 <= this.tabs - 1) {
      this.selectedIndex += 1;
      this.selectedIndexChange.emit(this.selectedIndex);
    }
  }

  @HostListener('swiperight', ['$event'])
  onSwiperight(event) {
    if(this.selectedIndex - 1 >= 0) {
      this.selectedIndex -= 1;
      this.selectedIndexChange.emit(this.selectedIndex);
    }
  }

  @Input() tabs: number;
  @Input()  selectedIndex: number;
  @Output() selectedIndexChange = new EventEmitter<number>();

}

---

玩得开心。

请注意，该示例的

上也有它，所以这不应该是问题所在。是的，但是该DIV是使用*ngFor复制的，因此刷卡处理程序最终会出现在每个虚拟角色DIV上。请检查正在运行的代码。上面的解决方案同样有效，因为选项卡组保留选定索引。有趣的东西。很高兴你解决了：）谢谢你详细说明。就像我之前说的，这确实有道理，它可能是一个问题，你的解释完美地解释了为什么会这样，谢谢！不，您仍然需要HammerJS，因为swipleft和swiperight事件来自HammerJS.hey@MaxPayne，html表示不能绑定到“tabs”，因为它不是“div”的已知属性。（“Action>虽然我在组件文件中声明了选项卡。

  <div class="swipe-box">
    <md-tab (swipeleft)="swipe(1, $event.type)" 
            (swiperight)="swipe(1, $event.type)">
       (...) //Content Tab 1
    </md-tab>
    <md-tab (swipeleft)="swipe(2, $event.type)" 
            (swiperight)="swipe(2, $event.type)">
       (...) //Content Tab 2
    </md-tab>
  </div>

<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

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);
    }
  }
}

import { Directive, HostListener, EventEmitter, Input, Output } from '@angular/core';

@Directive({
  selector: '[swipeTab]'
})
export class SwipeTabDirective {

  @HostListener('swipeleft', ['$event'])
  onSwipeleft(event) {
    if(this.selectedIndex + 1 <= this.tabs - 1) {
      this.selectedIndex += 1;
      this.selectedIndexChange.emit(this.selectedIndex);
    }
  }

  @HostListener('swiperight', ['$event'])
  onSwiperight(event) {
    if(this.selectedIndex - 1 >= 0) {
      this.selectedIndex -= 1;
      this.selectedIndexChange.emit(this.selectedIndex);
    }
  }

  @Input() tabs: number;
  @Input()  selectedIndex: number;
  @Output() selectedIndexChange = new EventEmitter<number>();

}

<md-tab-group md-stretch-tabs [(selectedIndex)]="selectedIndex" [(tabs)]="tabs" swipeTab>
       <md-tab>
          (...) //Content Tab 2
       </md-tab>
       <md-tab>
          (...) //Content Tab 2
       </md-tab>
       <md-tab>
          (...) //Content Tab 3
       </md-tab>           
</md-tab-group>

  selectedIndex: number = 0;
  tabs: number = 3;