需要在每个选项卡上调用不同的功能，然后单击“材料设计”选项卡。

Question

我需要在Angular材质设计选项卡中的每个选项卡click事件上调用不同的功能。

我已经尝试过this解决方案，但是它不起作用。

Answer 1

您可以尝试以下操作-

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

这是ts

import { Component } from '@angular/core';

@Component({
  selector: 'tabs-overview-example',
  templateUrl: 'tabs-overview-example.html',
  styleUrls: ['tabs-overview-example.css'],
 })

 export class TabsOverviewExample {

 public onTabSwitch(tabName: string) {
   if (tabName == 'Tab 1') {
     this.funA();
   } else {
     this.funB();
   }
 }

 public funA() {
   console.log('Called funA');
  }

 public funB() {
   console.log('Called funB');
  }
}

我已经更新了stackblitz