如何在Angular Material中启用滑动手势以移至标签模块的下一个标签？（寻找适用于两个以上标签的解决方案）

Question

我在有角材质中使用了tabs组件：https : //material.angular.io/components/component/tabs

有没有一种方法可以使我可以在选项卡的内容区域上滑动以触发移动到下一个选项卡？

我当前的模板html：

<md-tab-group>
  <md-tab label="Tab 1">Content 1</md-tab>
  <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>

我已经导入了Hammerjs，即使我发誓我以前也曾经看过类似的东西，但文档似乎没有提及任何内容。

具体来说，我希望能够向左单击并拖动鼠标，以使其向左滑动到左侧选项卡。然后向右点击并拖动鼠标，使其向右滑动至右选项卡。

Answer 1

这是一种简单的方法：

可以使用的插件：https ://plnkr.co/edit/uJ3n8XedvCCdeUHXKpwX ? p = preview

首先，将Hammerjs添加到您的模块中：

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

提供它 providers

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

示例模块：

@NgModule({

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],

  declarations: [TabsOverviewExample],
  bootstrap: [TabsOverviewExample],
  providers: [{ 
                    provide: HAMMER_GESTURE_CONFIG, 
                    useClass: HammerGestureConfig 
                }]
})
export class PlunkerAppModule {}

然后像这样构建您的组件：

import {Component, AfterViewInit, ViewChild, ViewChildren} from '@angular/core';
import { MdTabGroup, MdTab } from '@angular/material';


@Component({
  selector: 'tabs-overview-example',
  template:`
  <md-tab-group [selectedIndex]="selected"  (swipeleft)="swipe($event.type)" (swiperight)="swipe($event.type)">
    <md-tab label="Tab 1"><div class="content">Content 1</div></md-tab>
    <md-tab label="Tab 2"><div class="content">Content 2</div></md-tab>
    <md-tab label="Tab 3"><div class="content">Content 3</div></md-tab>
    <md-tab label="Tab 4"><div class="content">Content 4</div></md-tab>
    <md-tab label="Tab 5"><div class="content">Content 5</div></md-tab>
  </md-tab-group>`,
  styles:['.content{ height: 500px; background-color: yellow;}']
})
export class TabsOverviewExample implements AfterViewInit{
  @ViewChild(MdTabGroup) group;
  @ViewChildren(MdTab) tabs;
  tab_num = 0;
  selected = 0;
  SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' };

  number_tabs
  ngAfterViewInit(){
    this.tab_num = this.tabs.length
    console.log(this.group)
  }
  swipe(eType){
    console.log(eType);
    if(eType === this.SWIPE_ACTION.LEFT && this.selected > 0){
      console.log("movin left")
      this.selected--;
    }
    else if(eType === this.SWIPE_ACTION.RIGHT && this.selected < this.tab_num){
      console.log("movin right")
      this.selected++;
    }
    console.log(this.selected)
  }


}