如何在Angular 4选项卡中选择选项卡时调用函数？

Question

任何人都知道如何选择选项卡1时调用函数？ MD-上选择是没有更多的工作

<md-tab-group> 
    <md-tab label="Tab 1">Content 1</md-tab> 
    <md-tab label="Tab 2">Content 2</md-tab> 
</md-tab-group> 

Answer 1

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

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!') 
    } 
    } 
} 

Answer 2

您需要使用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> 

并在您的组件中：

onTabSelectChange(tabChange: MdTabChangeEvent) { 
// do whatever you need to do here 
} 

您可以查看Material Tabs的文档，详细了解MdTabChangeEvent

Answer 3

你可以这样做：

public changeTab(tabgroup) { 
    let pid = tabgroup._currentLabelWrapper.id;  
    let activeTab =$("#"+pid).text().trim(); 
    console.dir("Active tab: " + activeTab); 
} 

这样你：

<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> 

在TS文件可以有任何数量的选项卡和instantl你可以得到当前选择的标签。