6

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

看法

<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)对某物的引用并通过其原生 DOM 元素检索数据（例如data-属性）。

不过，这两个选项似乎都超级矫枉过正。

问题

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

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

4

3 回答 3

4

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

看法

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

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

于 2018-11-01T14:38:11.183 回答
4

使用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') { ... }
}
于 2020-10-28T12:44:42.623 回答
1

不完全是我想要的，但这是我在此期间找到的最佳解决方案：

看法

<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帮助找到这个！

于 2018-11-01T14:14:34.563 回答