检测单击当前活动的选项卡。 （角度材料选项卡）

Question

我有一个带有不同标签的mat-tab组。我想检测单击活动选项卡标题。

EG。我有2个标签 - 公司标签和用户标签，每个标签内有2个视图 - 列表视图视图和详细视图。最初我想加载列表并点击一个项目，想要转到相应项目的详细视图。但是，如果我再次单击选项卡标题，我想再次转到列表视图。

有些事件（selectedTabChange）可以检测标签是否已更改但由于我在同一标签内，因此不会发出标签。任何帮助。？

<mat-tab-group class="theme-specific-tabs account-page-tabs" [(selectedIndex)]="selectedTab"  (selectedIndexChange)="accountTabOnIndexChange($event)">

Answer 1

这是一个黑客，但它应该工作。请注意，setTimeout()调用是必要的，因为在click事件到达我们的回调之前似乎更改了标签更改，因此我们需要延迟保存选定的标签索引，直到click事件完成传播。这也是我们无法从MatTab检查活动标签索引的原因。

<mat-tab-group (selectedIndexChange)="selectedIndexChange($event)" (click)="tabClick($event)">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>


selectedTabIndex: number = 0;
selectedIndexChange(index: number) {
  setTimeout(() => this.selectedTabIndex = index);
}

tabClick(event: MouseEvent) {
  let el = event.srcElement;
  const attr = el.attributes.getNamedItem('class');
  if (attr.value.indexOf('mat-tab-label-content') >= 0) {
    el = el.parentElement;
  }
  const tabIndex = el.id.substring(el.id.length - 1);
  if (parseInt(tabIndex) === this.selectedTabIndex) {
    // active tab clicked
    console.log(tabIndex);
  }
}

Here it is on stackblitz

Answer 2

onTabGroupClicked(event) {
    if (this.prevTabIndex === this.activeTabIndex) {
      // current active tab clicked!
    } else {
      // another tab clicked!
    }

    this.prevTabIndex = this.activeTabIndex;
    
  }

<mat-tab-group [(selectedIndex)]="activeTabIndex" (click)="onTabGroupClicked()">

Answer 3

更新G. Tranter针对Angular 8和我的案例的答案（有时单击进入内部元素）：

<mat-tab-group (selectedIndexChange)="onTabChange($event)" (click)="tabClick($event)">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

onTabChange(event: MatTabChangeEvent) {
    setTimeout(() => {
        this.selectedTabIndex = event.index;
    });
}

tabClick(event: MouseEvent) {
    let el = event.target as Element;
    let index: number;

    if (el.classList.contains("mat-tab-label")) {
        index = +el.id.substring(el.id.length - 1);
    }
    const ppEl = el.parentElement.parentElement
    if (ppEl.classList.contains("mat-tab-label")) {
        index = +ppEl.id.substring(ppEl.id.length - 1);
    }
    if (index === this.selectedTabIndex) {
        console.log("click on selected");
    }

}