选择时在 mat-tab 中加载函数 - Angular 2 material 使用 mat-tab-group

Question

如何添加 action 到 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); 
  }
}