使用“材质选项卡”组以编程方式选择Angular 2材质中的“材质选项卡”

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

我尝试使用[selectedIndex]=selectedTab将selectedTab更改为所需的选项卡索引，但在加载选项卡后似乎不起作用。

使用最新的angular+材质更新

有多种方法

可能的解决方案，使用双向数据绑定 选项卡演示1！ 内容1 内容2 内容3 公共demo1TabIndex=1； 公开演示单击{ 常数tabCount=3； this.demo1TabIndex=this.demo1TabIndex+1%tabCount； } 可能的解决方案，使用模板变量并通过我们的点击函数 选项卡演示2！ 内容1 内容2 公共演示2btnclicktab组：MatTabGroup{ if！tabGroup | |！tabGroup instanceof MatTabGroup return； const tabCount=tabGroup.\u tabs.length； tabGroup.selectedIndex=tabGroup.selectedIndex+1%tabCount； } 可能的解决方案，使用@ViewChild 选项卡演示3！ 内容1 内容2 @ViewChilddemo3Tab，{static:false}demo3Tab:MatTabGroup； 公共演示3b单击{ const tabGroup=this.demo3Tab； if！tabGroup | |！tabGroup instanceof MatTabGroup return； const tabCount=tabGroup.\u tabs.length； tabGroup.selectedIndex=tabGroup.selectedIndex+1%tabCount； }

---

实时演示：

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

如果您的HTML有：，则可以使用@ViewChild'tabs'选项卡组：MatTabGroup；在组件中获取对它的引用

---

然后可以执行此操作。tabGroup.selectedIndex=newIndex；在OnInit函数中或其他地方。

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

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

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>

---

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

在HTML模板上，我有以下内容：

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

我的服务代码如下所示：

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

---

这只对我有用一次。使用[selectedIndex]进行双向绑定。我必须混合解决方案1和3才能获得良好的性能。谢谢。我实现了1来触发两个选项卡，一个用于登录，一个用于注册。要以编程方式触发register选项卡，请从显示no account（无帐户）的链接执行？创建帐户-它工作。谢谢虽然我将链接作为子组件，并且必须通过eventEmitter触发。仍然很有魅力。@Mathias感谢您提出使用[selectedIndex]进行双向绑定的想法。它帮了我很大的忙，只是为了补充这个答案：Angular 8现在需要一个ViewChild为'static'的对象：@ViewChild'tabs'，{static:false}tabGroup:MatTabGroup；需要导入以下内容：从“@angular/material”导入{MatTabGroup}；对于延迟加载的内容，必须使用ngAfterContentInit而不是OnInit。Angular首先需要将外部内容投影到组件的视图中。。ngAfterContentInit确保它是。参见。在角材料文档中有一个例子，称为动态更改选项卡的选项卡组：这是最好的选项，在上面的正式文档中。

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