如何在mat-tab的活动页签上触发函数

Question

使用angular 6，我有2个组件，我使用mat-tab，我有3个选项卡，每个选项卡称为一个组件

<mat-tab label="one">
<score-football ></ score-football >
</mat-tab>

<mat-tab label="second">
<score-hockey ></ score-hockey >
</mat-tab>

<mat-tab label="third">
<score-others ></ score-others>
</mat-tab>

如何在组件中执行或触发函数，每次选项卡进入焦点时，例如，当“第二个”选项卡处于活动状态时，我想要触发一个函数

getFreshScore(){
alert(‘going to get fresh score from DB’);
}  

所以每次我分数都会刷新

Answer 1

MatTabGroup会发出一个名为selectedIndexChange - use it的事件。

HTML：

<mat-tab-group (selectedIndexChange)="getFreshScore($event)">
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

组件：

getFreshScore(index: number) {
    alert('going to get fresh score from DB ' + index);
  }

DEMO