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

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

演示版

Answer 2

事件应该selectedTabChange给mat-tab-group

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