[英]How to call a function when a tab is selected in Angular 4 Tabs?
anyone knows how can I call a function when Tab 1 is selected ? 任何人都知道选择Tab 1后如何调用函数? md-on-select is no more working md-on-select不再起作用
<md-tab-group>
<md-tab label="Tab 1">Content 1</md-tab>
<md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>
template html: 模板html:
<md-tab-group (selectChange)='onSelectChange($event)'>
<md-tab label="Tab 1">Content 1</md-tab>
<md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>
component.ts component.ts
import {Component} from '@angular/core';
@Component({
selector: 'tabs-overview-example',
templateUrl: 'tabs-overview-example.html',
})
export class TabsOverviewExample {
onSelectChange(event) {
if(event.index== 0){
console.log('Tab1 is selected!');
}else{
console.log('Tab1 is not selected!')
}
}
}
You need to use the selectChange
event: 您需要使用selectChange
事件:
<md-tab-group (selectChange)="onTabSelectChange($event)">
<md-tab label="Tab 1">Content 1</md-tab>
<md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>
And in your component: 在您的组件中:
onTabSelectChange(tabChange: MdTabChangeEvent) {
// do whatever you need to do here
}
You can review the docs for Material Tabs for more details on MdTabChangeEvent
您可以查看“ 材料选项卡”的文档,以获取有关MdTabChangeEvent
更多详细信息
You can do: 你可以做:
<md-tab-group #tabgroup (focusChange)="changeTab(tabgroup)">
<md-tab label="Tab 1">Content 1</md-tab>
<md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>
in ts file : 在ts文件中 :
public changeTab(tabgroup) {
let pid = tabgroup._currentLabelWrapper.id;
let activeTab =$("#"+pid).text().trim();
console.dir("Active tab: " + activeTab);
}
This way you can have any number of tabs and instantly you can get which tab have been currently selected. 这样,您可以拥有任意数量的标签,并且您可以立即获得当前已选择的标签。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.