如何在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的事件-使用它。

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