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

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 ，因为第二个由于{ {1}}。

这对我来说确实很有意义，但是这使得很难真正实际单击了哪个选项卡，具体取决于要显示的是哪个选项卡。

我可以：

• 再次测试*ngIf中的每个标签条件，以找出哪个索引对应于哪个标签，
• （可能）将onTabChange绑定到某物，并通过其本机DOM元素检索数据（例如ViewChild(ren)属性）。

虽然这两个选项似乎都不过分。

问题

在上面的代码中，什么才是知道单击data-标签的选项卡而不测试标签本身（这显然太可怕了）的合适方法？

Simple Stackblitz，如果有帮助的话。

Answer 1

使用aria-labelledby属性来标识制表符，而无需使用人类可读的文本标签。

<mat-tab aria-labelledby="tab-x">
    <span *matTabLabel id="tab-x" i18n>Tab X</span>
</mat-tab>

在代码中：

onTabChange(event: MatTabChangeEvent) {
    const tabId = event.tab.ariaLabelledby;
    if (tabId === 'tab-x') { ... }
}

Answer 2

并非我要找的东西，但这是我在此期间找到的最佳解决方案：

查看

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

脚本

onTabChange(event: MatTabChangeEvent) {
  const tabName = event.tab.content.viewContainerRef.element.nativeElement.dataset.name;
  // ...
}

看起来有点黑（很冗长），但确实可以。

PS：感谢Gitter上的@GreenMonkeyBoy帮助我们找到了它！

Answer 3

实际上我回答了两次，因为我认为这种解决方案也很有趣，而且可能（最接近）我想要的东西：

查看

<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属性。

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