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

Posted 2023-02-18

【中文标题】检测单击当前活动的选项卡。 （角材料选项卡）

【英文标题】：Detect click on the currently active tab. ( Angular material tab )

【发布时间】：2018-11-07 09:53:53

【问题描述】：

我有一个带有不同标签的 mat-tab 组。我想检测对活动标签页眉的点击。

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

有像 (selectedTabChange) 这样的事件可以检测选项卡是否已更改，但由于我在同一个选项卡内，因此不会发出它。有什么帮助吗？

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

【参考方案1】：

这是一个 hack，但它应该可以工作。请注意，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);
  

Here it is on stackblitz.

【讨论】：

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

【参考方案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()">

【参考方案3】：

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

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

【参考方案4】：

虽然迟到了 - 不过是基于documentation (isActive) 的方法。您可以简单地将您感兴趣的标签添加到id，例如

<mat-tab #secondTab>

然后评估状态，例如secondTab.isActive。这是一个有效的full sample。观看第二个标签 - 它会更改图标和标题！