如何使用按钮返回javascript（Angular Material）的最后一个标签？

Question

我的代码摘要

我想如果我单击“返回内容”，则返回内容选项卡1；

<mat-tab-group mat-stretch-tabs>
    <mat-tab label="content 1">
        ........
    </mat-tab>
    <mat-tab label="content 2">
        <button mat-raised-button (click)=""> go Back content 1</button>
    </mat-tab>
</mat-tab-group>

Answer 1

您可以将当前所选标签的索引绑定到变量，然后在需要时设置该变量，如下所示：

<mat-tab-group mat-stretch-tabs [selectedIndex]="selectedIndex">
    <mat-tab label="content 1">
        ........
    </mat-tab>
    <mat-tab label="content 2">
        <button mat-raised-button (click)="selectedIndex = 0"> go Back content 1</button>
    </mat-tab>
</mat-tab-group>

您可以阅读更多here。

Answer 2

尝试一下：

<mat-tab-group mat-stretch-tabs [(selectedIndex)]="selectedTab">
    <mat-tab label="content 1">
       <p>one</p>
    </mat-tab>
    <mat-tab label="content 2">
       <p>two</p>
       <button mat-raised-button (click)="openContentOne()"> go Back content 1</button>
   </mat-tab>
</mat-tab-group>

和您的ts中：

selectedTab = 0;
openContentOne() {
    this.selectedTab = 0;
}