检测当前活动选项卡上的单击。(角质材料标签)
检测当前活动选项卡上的单击。(角质材料标签)
提问于 2018-05-28 19:33:20
我有一个有不同标签的垫子组。我希望检测到对活动选项卡头的单击。
例如：我有两个标签-一个公司标签和一个用户标签，在每个标签有两个视图-一个列表视图和一个详细的视图。最初，我想加载列表，在单击某个项目时，希望转到相应项的详细视图。但是，如果我再次单击选项卡标题，我想再次进入列表视图。
有(selectedTabChange)这样的事件可以检测标签是否被更改，但是由于我在同一个选项卡中，所以不会被发出。有什么帮助吗？
<mat-tab-group class="theme-specific-tabs account-page-tabs" [(selectedIndex)]="selectedTab" (selectedIndexChange)="accountTabOnIndexChange($event)">回答 4
Stack Overflow用户
回答已采纳
发布于 2018-05-28 22:32:09
这是一次黑客攻击，但应该会成功的。请注意，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);
}
}Stack Overflow用户
发布于 2020-05-30 12:42:45
更新G. Tranter关于角8和我的情况的答案(有时单击get into element)：
<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");
}
}Stack Overflow用户
发布于 2018-07-27 13:21:49
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()">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50572554
复制相关文章
相似问题
腾讯云开发者
