[英]Angular Material 5: how to call a function when a tab is selected (clicked)?
I have the following html code我有以下html代码
<mat-tab label="Regular" (selectChange)="tabClick()"
(click)="tabClick()">
<h1>Some more tab content</h1>
</mat-tab>
and this is the function,这就是功能,
tabClick(){
console.log('Tab clicked...');
}
but it doesn't seems to be called, why?但它似乎没有被调用,为什么? No one of the above events are fired?没有任何一个以上事件被触发?
The selectedTabChanged
event has to be attached to the <mat-tab-group>
element 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);
}
An event should be selectedTabChange
to the mat-tab-group
一个事件应该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>
Selected tab will trigger out the tabChange Event and get the active tab.选定的选项卡将触发 tabChange 事件并获取活动选项卡。
And in the .ts
file:在.ts
文件中:
onChange(event: MatTabChangeEvent) {
const tab = event.tab.textLabel;
console.log(tab);
if(tab===" Tab 1")
{
console.log("function want to implement");
}
}
SelectTab is used to call click-on tab data. SelectTab 用于调用点击选项卡数据。
<tab (selectTab) = "onChange($event)" >
<div>
any data
</div>
</tab >
onChange(data:any){
console.log(data)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.