Angular Material 5：如何在选中（单击）选项卡时调用函数？

Question

我有以下html代码

<mat-tab label="Regular" (selectChange)="tabClick()"
                 (click)="tabClick()">
   <h1>Some more tab content</h1>
</mat-tab>

这是函数，

tabClick(){
    console.log('Tab clicked...');
}

但是好像没有调用，为什么？以上事件均未触发？

Answer 1

一个事件应该selectedTabChange到mat-tab-group

<mat-tab-group (selectedTabChange)="tabClick()">
    <mat-tab label="Regular">
       <h1>Some more tab content</h1>
    </mat-tab>
</mat-tab-group>

Answer 2

selectedTabChanged 事件必须附加到 <mat-tab-group> 元素

<mat-tab-group (selectedTabChange)="tabClick($event)">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

tabClick(tab) {
  console.log(tab);
}

Demo

Answer 3

<mat-tab-group (selectedTabChange)="onChange($event)">
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

选中的标签会触发 tabChange 事件并获取活动标签。

并且在 .ts 文件中：

onChange(event: MatTabChangeEvent) {
    const tab = event.tab.textLabel;
    console.log(tab);
    if(tab===" Tab 1")
     {
       console.log("function want to implement");
      }
  }

Answer 4

SelectTab用于调用click-on标签数据。

 <tab (selectTab) = "onChange($event)" >
        <div>
            any data
        </div>
    </tab >
    

    onChange(data:any){
    console.log(data)
    }

Angular Material 5：如何在选中（单击）选项卡时调用函数？

Angular Material 5: how to call a function when a tab is selected (clicked)?

angular

angular-material

angular5

angular-material-5