如何在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你可以得到當前選擇的標籤。