[英]Angular Material 5: how to call a function when a tab is selected (clicked)?
我有以下html代码
<mat-tab label="Regular" (selectChange)="tabClick()"
(click)="tabClick()">
<h1>Some more tab content</h1>
</mat-tab>
这就是功能,
tabClick(){
console.log('Tab clicked...');
}
但它似乎没有被调用,为什么? 没有任何一个以上事件被触发?
selectedTabChanged
事件必须附加到<mat-tab-group>
元素
<mat-tab-group (selectedTabChange)="tabClick($event)">
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>
tabClick(tab) {
console.log(tab);
}
一个事件应该selectedTabChange
TabChange到mat-tab-group
<mat-tab-group (selectedTabChange)="tabClick()">
<mat-tab label="Regular">
<h1>Some more tab content</h1>
</mat-tab>
</mat-tab-group>
<mat-tab-group (selectedTabChange)="onChange($event)">
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>
选定的选项卡将触发 tabChange 事件并获取活动选项卡。
在.ts
文件中:
onChange(event: MatTabChangeEvent) {
const tab = event.tab.textLabel;
console.log(tab);
if(tab===" Tab 1")
{
console.log("function want to implement");
}
}
SelectTab 用于调用点击选项卡数据。
<tab (selectTab) = "onChange($event)" >
<div>
any data
</div>
</tab >
onChange(data:any){
console.log(data)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.