在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);
}

这样，您可以拥有任意数量的标签，并且您可以立即获得当前已选择的标签。