Mat-tab 点击事件

Question

我正在使用 Angular Universal 和 Angular Material 2，因此我只能通过点击来工作（就用户事件而言）。是否可以从选项卡附加（单击）属性来更改索引并提取动态数据。

我曾经有一个 getAlbums 方法，它可以检索 selectedIndexChange 上的图片数组，现在这不是一个选项，还有其他方法吗？

唯一的其他方法是有一个单独的按钮来控制选项卡索引。

Answer 1

我可以使用下面的代码获取单击事件或鼠标事件

网页

<mat-tab-group disableRipple="true" [selectedIndex]="selectedPageIndex">
  <mat-tab *ngFor="let tabData of tabsData;">
    <ng-template mat-tab-label>
      <div (mousedown)="navigate($event, tabData)"> <!-- From here you can get all event and can pass data from *ngFor -->
        <mat-icon *ngIf="!!tabData.icon"> {{ tabData.icon }}</mat-icon>
        <span *ngIf="!tabData.onlyIcon"> {{ tabData.name }}</span>
      </div>
    </ng-template>
  </mat-tab>
</mat-tab-group>

风格

.mat-tab-label {
  padding: 0;
  height: 40px;
}
.mat-tab-label-content {
  padding: 0 8px;
}
.mat-tab-label-content > div {
  line-height: 40px;
}