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

live-demo：http://plnkr.co/edit/k2cw7Jw5YEstrY3OWbdq?p=preview

Answer 2

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

在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 3

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

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

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

Answer 4

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

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

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

然后，在函数中：

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

在

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

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

4 个答案: