Wie ruft man eine Funktion auf, wenn in Angular 4 Tabs eine Registerkarte ausgewählt ist?

Question

weiß jemand wie kann ich eine Funktion aufrufen, wenn Tab 1 ausgewählt ist? md-on-select ist nicht mehr arbeiten

<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

Vorlage 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

Sie müssen die selectChange Ereignis verwenden:

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

Und in Ihrem Bauteil:

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

Sie können die Dokumentation für Material Tabs für weitere Details über MdTabChangeEvent

Answer 3

überprüfen können Sie tun:

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

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

Auf diese Weise können kann eine beliebige Anzahl von Tabs und Instantls haben y Sie können auswählen, welche Registerkarte aktuell ausgewählt wurde.