Question

使用角度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

如何在mat-tab中的活动选项卡上触发功能

1 个答案: