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

我有一个具有不同选项卡的mat选项卡组。我想检测活动选项卡标题上的单击

我有两个选项卡-公司选项卡和用户选项卡，每个选项卡内有两个视图-列表视图和详细视图。最初，我想加载列表，然后单击某个项目，然后转到相应项目的详细视图。但是如果我再次单击选项卡标题，我想再次转到列表视图

有类似（

selectedTabChange

）的事件检测选项卡是否已更改，但由于我位于同一选项卡内，因此不会发出该选项卡。需要帮忙吗

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

---

这是一个黑客攻击，但它应该可以工作。请注意，

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);
  }
}

内容1
内容2
selectedTabIndex:number=0；
selectedIndexChange（索引：编号）{
setTimeout（（）=>this.selectedTabIndex=index）；
}
tabClick（事件：MouseEvent）{
设el=event.src元素；
常量attr=el.attributes.getNamedItem（'class'）；
if（属性值indexOf（'mat-tab-label-content'）>=0）{
el=el.parentElement；
}
const tabIndex=el.id.substring（el.id.length-1）；
if（parseInt（tabIndex）==this.selectedTabIndex）{
//已单击活动选项卡
console.log（tabIndex）；
}
}

.

onTabGroupClicked（事件）{
if（this.prevTabIndex==this.activeTabIndex）{
//当前活动选项卡已单击！
}否则{
//另一个标签点击！
}
this.prevTabIndex=this.activeTabIndex；
}

---

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

内容1
内容2
onTabChange（事件：MATTABCHANGEVENT）{
设置超时（（）=>{
this.selectedTabIndex=event.index；
});
}
tabClick（事件：MouseEvent）{
将el=event.target作为元素；
let索引：数字；
if（el.classList.contains（“mat标签”））{
索引=+el.id.substring（el.id.length-1）；
}
常量ppEl=el.parentElement.parentElement
if（ppEl.classList.contains（“材料标签”））{
索引=+ppEl.id.substring（ppEl.id.length-1）；
}
如果（索引==此.selectedTabIndex）{
console.log（“单击所选”）；
}
}

我添加了一个stackblitz示例-试试看。该行从由Angular Material创建的div.mat-tab-label元素的id字符串中破解制表符索引。

<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");
    }

}