md-tabs使用代码转到角度2材质设计中的选项卡

Question

我正在使用Angular2创建一个应用程序,我需要使用选项卡内的按钮在选项卡之间导航.

我的html如下:

<md-tab-group>
<md-tab label="one">
   <button md-raised-button>Navigate to Two</button>
   <button md-raised-button>Navigate to Three</button>
</md-tab label>
<md-tab label="two">
</md-tab label>
<md-tab label="three"> 
</md-tab label>
</md-tab-group>

因此,当我单击导航到三时,它应该带我到选项卡名称三

我正在使用Angular2材料设计这个例子可以有人知道解决这个问题.

提前致谢

Answer 1

这可以使用下面的代码使用selectedIndex输入变量来实现

<md-tab-group [selectedIndex]="selectedIndex">
  <md-tab label="Tab 1">Content 1 
  <button (click)="clickMe()"> click me to go to tab 2 </button>
  </md-tab>
  <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>

你的打字稿代码将是

@Component({
  selector: 'tabs-sample',
  templateUrl: './tabsSample.html',
})
export class TabsSample {
  selectedIndex:number=0;
  clickMe(){
    this.selectedIndex=1;
  }

}

更新1:基于评论.

您可以使用selectedIndexChange方法来修复该错误,如下所示

<md-tab-group  (selectedIndexChange)="selectedIndexChange($event)" 
               [selectedIndex]="selectedIndex">

</md-tab-group>

而你的代码将有

selectedIndexChange(val :number ){
    this.selectedIndex=val;
  }

也在插件中更新.

现场演示