以编程方式选择Angular 2材质中的md-tab

Question

如何在事件发生时选择特定选项卡？

我尝试[selectedIndex]="selectedTab"更改selectedTab所需的选项卡索引,但在加载选项卡后它似乎不起作用...

Answer 1

应该工作,也许在其他地方出问题？有错误信息吗？

<button md-raised-button (click)="changeTab()">Click me!</button>

<md-tab-group [selectedIndex]="selectedTab">
  <md-tab label="Tab 1">Content 1</md-tab>
  <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>

changeTab() {
  this.selectedTab += 1;
  if (this.selectedTab >= 2) this.selectedTab = 0;
}

现场演示:http://plnkr.co/edit/k2cw7Jw5YEstrY3OWbdq？p = preview

Answer 2

如果对任何人有帮助，也可以selectedIndex在组件中的MatTabGroup上进行设置。

如果您的HTML具有：<mat-tab-group #tabs>，则可以使用在组件中对其进行引用@ViewChild('tabs') tabGroup: MatTabGroup;。

然后，您可以this.tabGroup.selectedIndex = newIndex;在OnInit函数或其他地方执行操作。

Answer 3

我也有类似的问题。在我的情况下，我需要显示用户在离开组件之前所在的选项卡。我通过在服务中填充当前选定的选项卡索引解决了这个问题。

在 HTML 模板上，我有这个：

<mat-tab-group [selectedIndex]="getSelectedIndex()" (selectedTabChange)="onTabChange($event)">

onTabChange 和 getSelectedIndex 的实现如下：

    getSelectedIndex(): number {
        return this.appService.currentTabIndex
    }

    onTabChange(event: MatTabChangeEvent) {
        this.appService.currentTabIndex = event.index
    }

我的服务代码如下所示：

export class AppService {
    public currentTabIndex = 1  //default tab index is 1
}

Answer 4

我遇到了同样的问题，我尝试了上述答案，但没有帮助。这是我的解决方案：

在我的打字稿代码中，首先声明一个变量：

selected = new FormControl(0); // define a FormControl with value 0. Value means index.

然后，在函数中：

changeTab() {
    this.selected.setValue(this.selected.value+1);
 } //

在html中，

 <mat-tab-group [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
            <mat-tab label="label0">0</mat-tab>
            <mat-tab label="label1">1</mat-tab>
            <mat-tab label="label2">2</mat-tab>
            <mat-tab label="label3">3</mat-tab>
            <mat-tab label="label4">4</mat-tab>
            <mat-tab label="label5">5</mat-tab>
</mat-tab-group>

<button (click)="changeTab()">ChangeTab</button>