angular - 选择时在 mat-tab 中加载功能 - 使用 mat-tab-group 的 Angular 2 材料

Question

选择后如何向 mat-tab添加操作？

就我而言，我想设置laodCard=true选择卡的时间。

这是我写的代码，但操作(click)不起作用

<mat-tab label="second tab" (click)="loadCards(true)">
       <app-card [load]="laodCard" >
       </app-card>
</mat-tab>

Answer 1

查看 mat-tab-group 的文档： https ://material.angular.io/components/tabs/api#MatTabGroup

您可以在选项卡组级别设置选项卡更改的侦听器。在该侦听器中，您可以指定切换到任何选项卡时应该发生的情况。

这是一个小例子：

模板：

<mat-tab-group color="primary" (selectedTabChange)="onLinkClick($event)">
    <mat-tab label="second tab">
       <app-card [load]="laodCard" >
       </app-card>
    </mat-tab>
</mat-tab-group>

零件：

import { MatTabChangeEvent } from '@angular/material/tabs';

// ...

onLinkClick(event: MatTabChangeEvent) {

  //console log all the data that the event returns
  console.log('event => ', event);
  console.log('index => ', event.index);
  console.log('tab => ', event.tab);


  //replace the string here with the data returned by the last console.log
  if(event.tab == "your selected tab") {
      this.loadCards(true); 
  }
}