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

Question

任何人都知道如何在 selected 选项卡 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
}

您可以查看 Material Tabs 的文档以了解有关 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);
}

通过这种方式，您可以拥有任意数量的选项卡，并且您可以立即了解当前选择了哪个选项卡。

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

How to call a function when a tab is selected in Angular 4 Tabs?

angular-material2

angular