角材料 - 确切知道选择了哪个选项卡

Question

所以我可能在文档中遗漏了一些明显的内容，但我只是在寻找一种简单的方法来查找在以下场景中选择了哪个选项卡：

看法

<mat-tab-group (selectedTabChange)="onTabChange($event)">
  <mat-tab *ngIf="true" label="Label1">Content 1</mat-tab>
  <mat-tab *ngIf="false" label="Label2">Content 2</mat-tab>
  <mat-tab *ngIf="true" label="Label3">Content 3</mat-tab>
</mat-tab-group>

显然，条件在我的实际代码中是动态的。这仅适用于示例。

脚本

onTabChange(event: MatTabChangeEvent) {
  // ?
}

问题

在上面的脚本中，event.index如果单击第一个选项卡将返回 0，如果单击第三个选项卡将返回1，因为由于*ngIf.

这对我来说确实有意义，但是根据显示的选项卡开始，很难知道实际单击了哪个选项卡。

我可以：

• 再次测试其中的每个选项卡条件onTabChange以找出哪个索引对应哪个选项卡，
• （可能）绑定ViewChild(ren)对某物的引用并data-通过其原生 DOM 元素检索数据（例如属性）。

不过，这两个选项似乎都有些矫枉过正。

题

在上面的代码中，如果Label3不测试标签本身（这显然是可怕的），那么知道标签标签被点击的适当方法是什么？

如果有帮助的话，简单的 Stackblitz。

Answer 1

实际上回答了自己两次，因为我认为这个解决方案也很有趣，并且可能最接近我正在寻找的东西：

看法

<mat-tab-group (selectedTabChange)="onTabChange($event)">
  <mat-tab *ngIf="true" label="tab1">
    <ng-template mat-tab-label>Label 1</ng-template>
    Content 1
  </mat-tab>
  <mat-tab *ngIf="false" label="tab2">
    <ng-template mat-tab-label>Label 2</ng-template>
    Content 2
  </mat-tab>
  <mat-tab *ngIf="true" label="tab3">
    <ng-template mat-tab-label>Label 3</ng-template>
    Content 3
  </mat-tab>
</mat-tab-group>

脚本

onTabChange(event: MatTabChangeEvent) {
  const tabName = event.tab.textLabel;
  // ...
}

基本上，这使用另一种方式将（标题）文本标签添加到选项卡，即使用<ng-template>，这似乎优先于该label属性。

因此，后一个属性可用于存储选项卡的“编程”名称（与其公共文本相反），并且可以在脚本端轻松检索。