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
}

您可以查看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选项卡中选择选项卡时调用函数？

3 个答案: