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

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