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

Question

这是我的示例代码

主 Controller

<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>

在每个选项卡中，都有不同的 Controller ，名为 - 投票和调查。在这里，如果用户从一个选项卡移动到另一个选项卡，我想刷新\重置一个选项卡数据。

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

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>