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

也在 plunk 中更新.

Updated in the plunk as well.

现场演示

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