如果用户从一个选项卡移动到另一个选项卡，如何重置/刷新 Angular Material 中的选项卡主体数据？

Question

这是我的示例代码

主控制器

<mat-tab-group id="report">
<mat-tab label="Poll">
<div class="demo-tab-content">
  <app-poll></app-poll>
</div>

</mat-tab>
<mat-tab label="Survey">
<div class="demo-tab-content">
  <app-survey></app-survey>
</div>
</mat-tab>

在每个选项卡中，都有不同的控制器命名 - Poll 和 Survey。如果用户从一个选项卡移动到另一个选项卡数据，我想在这里刷新\重置一个选项卡数据。

有什么简单的方法可以实现吗？

Answer 1

如果不想使用@Input参数，也可以使用@ViewChild获取对子组件的引用，然后在这些组件上调用一个方法来刷新数据

组件.ts

  import {ViewChild} from '@angular/core';
  import { MatTabChangeEvent } from '@angular/material';
  //...
  @ViewChild(PollComponent) private pollComponent: PollComponent;
  @ViewChild(SurveyComponent) private surveyComponent: SurveyComponent;


  //...
  onTabChanged(event: MatTabChangeEvent) 
  {
    if(event.index == 0)
    {
        this.pollComponent.refresh();//Or whatever name the method is called
    }
    else
    {
        this.surveyComponent.refresh(); //Or whatever name the method is called
    }
  }

组件.html

<mat-tab-group id="report" (selectedTabChange)="onTabChanged($event)">

</mat-tab>