md-tabs使用代码转到angular 2材质设计中的选项卡 [英] md-tabs Using code to goto a tab in angular 2 material design

问题描述

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

I am using Angular2 to create an application i which i need to navigate between tabs using a button present inside the tabs.

我的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>

因此，当我单击导航至三时，应该将我带到选项卡名称三

So,when i click the navigate to three it should take me to the tab name three

在这个示例中，我正在使用Angular2材质设计，任何人都可以解决该问题.

I am using the Angular2 material design for this example can anyone know to solve this problem.

预先感谢

推荐答案

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

This can be achieved using selectedIndex input variable using the below code

<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 方法修复该错误，如下所示

You can use the selectedIndexChange method to fix that error as below

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

</md-tab-group>

您的代码将具有

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

在插件中也进行了更新.

Updated in the plunk as well.

实时演示

LIVE DEMO

这篇关于md-tabs使用代码转到angular 2材质设计中的选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！