如何使用按钮返回 javascript (Angular Material) 中的最后一个选项卡？答案

【问题标题】：How to return in the last tabs in javascript (Angular Material) with a button?如何使用按钮返回 javascript (Angular Material) 中的最后一个选项卡？
【发布时间】：2019-01-16 17:04:43
【问题描述】：

我的代码总结

如果我点击“返回内容”，我希望在内容选项卡 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>

【问题讨论】：

您应该在点击事件中使用一个函数，在该函数中将名为 selected 的变量的值设置为 0。<mat-tab-group [selectedIndex]="selected">

标签： javascript angular angular-material material-design

【解决方案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。

【讨论】：

【解决方案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;
}

【讨论】：