在Angular 4選項卡中選擇選項卡時，如何調用函數？

Question

任何人都知道選擇Tab 1后如何調用函數？ 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>

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
}

您可以查看“ 材料選項卡”的文檔，以獲取有關MdTabChangeEvent更多詳細信息

Answer 3

你可以做：

<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文件中 ：

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

這樣，您可以擁有任意數量的標簽，並且您可以立即獲得當前已選擇的標簽。