blocks|key|1801771|text|这是一次黑客攻击，但应该会成功的。请注意，setTimeout()调用是必要的，因为似乎选项卡更改发生在单击事件到达回调之前，因此我们需要延迟保存选定的选项卡索引，直到单击事件完成传播。这也是为什么我们不能简单地检查来自MatTab的活动选项卡索引。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1801772|<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);
++}
}|code-block|syntax|javascript|1801773|这是在stackblitz。|1801774|entityMap|0|LINK|mutability|MUTABLE|url|https://stackblitz.com/edit/angular-ccyirv?embed=1&file=app/tabs-overview-example.ts^0|L|C|32|6|0|0|0|D|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

This is a hack, but it should work. Note that the <code>setTimeout()</code> call is necessary because it seems like the tab change happens before the click event gets to our callback, so we need to delay saving the selected tab index until the click event has completed propagation. That is also why we can't simply check for the active tab index from <code>MatTab</code>.

<pre><code>&lt;mat-tab-group (selectedIndexChange)="selectedIndexChange($event)" (click)="tabClick($event)"&gt;
 &lt;mat-tab label="Tab 1"&gt;Content 1&lt;/mat-tab&gt;
 &lt;mat-tab label="Tab 2"&gt;Content 2&lt;/mat-tab&gt;
&lt;/mat-tab-group&gt;


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

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

<a href="https://stackblitz.com/edit/angular-ccyirv?embed=1&amp;file=app/tabs-overview-example.ts" rel="nofollow noreferrer">Here it is on stackblitz</a>.

blocks|key|566471|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|566472|onTabGroupClicked(event)+{
++++if+(this.prevTabIndex+===+this.activeTabIndex)+{
++++++//+current+active+tab+clicked!
++++}+else+{
++++++//+another+tab+clicked!
++++}

++++this.prevTabIndex+=+this.activeTabIndex;
++++
++}|code-block|syntax|javascript|566473|<mat-tab-group+[(selectedIndex)]="activeTabIndex"+(click)="onTabGroupClicked()">|566474|566475|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>onTabGroupClicked(event) {
 if (this.prevTabIndex === this.activeTabIndex) {
 // current active tab clicked!
 } else {
 // another tab clicked!
 }

 this.prevTabIndex = this.activeTabIndex;
 
 }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-tab-group [(selectedIndex)]="activeTabIndex" (click)="onTabGroupClicked()"&gt;</code></pre>
</div>
</div>

blocks|key|1676796|text|更新G.+Tranter关于角8和我的情况的答案(有时单击get+into+element)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1676797|<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+=+%2Bel.id.substring(el.id.length+-+1);
++++}
++++const+ppEl+=+el.parentElement.parentElement
++++if+(ppEl.classList.contains("mat-tab-label"))+{
++++++++index+=+%2BppEl.id.substring(ppEl.id.length+-+1);
++++}
++++if+(index+===+this.selectedTabIndex)+{
++++++++console.log("click+on+selected");
++++}

}|code-block|syntax|javascript|1676798|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Update answer of G. Tranter for Angular 8 and my case (sometimes click get into inner element):

<pre><code>&lt;mat-tab-group (selectedIndexChange)="onTabChange($event)" (click)="tabClick($event)"&gt;
 &lt;mat-tab label="Tab 1"&gt;Content 1&lt;/mat-tab&gt;
 &lt;mat-tab label="Tab 2"&gt;Content 2&lt;/mat-tab&gt;
&lt;/mat-tab-group&gt;

onTabChange(event: MatTabChangeEvent) {
 setTimeout(() =&gt; {
 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");
 }

}
</code></pre>

blocks|key|1676818|text|虽然晚会晚了，但这是一种基于文档+(isActive)的方法。您可以简单地添加您对id感兴趣的选项卡。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1676819|<mat-tab+#secondTab>|code-block|syntax|javascript|1676820|而不是评估状态，例如{{secondTab.isActive}}。这是一个工作的全样本。看第二个选项卡-它改变了图标和标题！|1676821|entityMap|0|LINK|mutability|MUTABLE|url|https://v12.material.angular.io/components/tabs/api#MatTab|1|https://stackblitz.com/edit/angular-a1gyvp?file=src/app/tab-group-custom-label-example.html^0|I|8|15|2|E|2|0|0|0|A|M|14|3|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|M|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

Although late at the party - nevertheless an approach based on the <a href="https://v12.material.angular.io/components/tabs/api#MatTab" rel="nofollow noreferrer">documentation</a> (<code>isActive</code>). You could simply add the tab you are interested in an <code>id</code>, e.g.
<pre><code>&lt;mat-tab #secondTab&gt;
</code></pre>
and than evaluate the status, e.g. <code>{{secondTab.isActive}}</code>. Here is a working <a href="https://stackblitz.com/edit/angular-a1gyvp?file=src/app/tab-group-custom-label-example.html" rel="nofollow noreferrer">full sample</a>. Watch the second tab - it changes the icon and the title!

I have a mat-tab group with different tabs. I want to detect click on the active tab header. 

Eg. I have 2 tabs- a company tab and a users tab and inside each tab there are 2 views - a list view view and a detailed view. Initially I want to load the list and on clicking on an item, want to go to the corresponding item's detailed view. But If I click on the tab header again I want to goto the list view again. 

There are events like (<code>selectedTabChange</code>) which detects if tab is changed but since I am inside the same tab, it is not getting emitted. Any help.?

<pre><code>&lt;mat-tab-group class="theme-specific-tabs account-page-tabs" [(selectedIndex)]="selectedTab" (selectedIndexChange)="accountTabOnIndexChange($event)"&gt;
</code></pre>

Detect click on the currently active tab. ( Angular material tab )

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个有不同标签的垫子组。我希望检测到对活动选项卡头的单击。例如：我有两个标签-一个公司标签和一个用户标签，在每个标签有两个视图-一个列表视图和一个详细的视图。最初，我想加载列表，在单击某个项目时，希望转到相应项的详细视图。但是，如果我再次单击选项卡标题，我想再次进入列表视图。有(selectedTabChange)...

问检测当前活动选项卡上的单击。(角质材料标签)
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问检测当前活动选项卡上的单击。(角质材料标签)EN