如何使用 Angular 2 中的 Angular mat-tabs 在选项卡更改事件上传递附加值？

Question

我在我的项目中使用 Angular Material.io 选项卡，如下所示。但我只能在更改选项卡时获取所选选项卡的标签，我想在更改事件上传递自定义数据（AllTabData 变量），以便我可以使用共享服务更改全局变量，或者从基于选项卡选择的服务器。

         <mat-tab-group (selectedTabChange)="onTabChange($event)">

               <mat-tab  *ngFor="let tabname of tablist"  label="
          {{AllTabData[tabname]['Name']}}">

                      <!---tab content --->

                </mat-tab>

         <mat-tab-group> 

在组件中，我有这样的 onTabChange 函数

 public onTabChange(tabChangeEvent: MatTabChangeEvent): void {
        console.log(tabChangeEvent);
    }

这是我在控制台中使用 tabChangeEvent var 得到的内容，

Answer 1

在组件.html 中

<mat-tab-group (onTabChange)="onTabChange($event)">
   <mat-tab
      data="thisIsMyData"
      *ngFor="let tabname of tablist"
      label="{{AllTabData[tabname]['Name']}}">
                      <!---tab content --->
   </mat-tab>
<mat-tab-group> 

并获取component.ts中的数据

public onTabChange(tabChangeEvent: MatTabChangeEvent): void {
    let mydata = tabChangeEvent.tab._implicitContent.getAttribute("data");
    console.log(mydata);
}