检测单击当前活动的选项卡上。 （角材标签）(Detect click on the curren

我有不同的标签垫标签组。 我想检测的活动标签标题点击。

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

有喜欢的（事件selectedTabChange ）检测，如果标签被改变，但因为我在同一选项卡里面，它是没有得到发射。 任何帮助？

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

Answer 1:

这是一个黑客，但它应该工作。 注意setTimeout()调用是必要的，因为它似乎是在标签的变化发生之前的单击事件到达我们的回调，所以我们需要推迟保存所选选项卡索引，直到单击事件已完成传播。 这也是为什么我们不能简单地检查从活动选项卡索引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);
  }
}

这是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()"> 

文章来源: Detect click on the currently active tab. ( Angular material tab )