如果用户从一个选项卡移动到另一个选项卡，如何在 Angular Material 中 reset/refresh 选项卡正文数据？

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>

在每个选项卡中，都有不同的控制器名为 - 投票和调查。如果用户从一个标签移动到另一个标签，我想 refresh\reset 一个标签数据。

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

Answer 1

你可以read about component interaction types here.

你需要这样的东西：

1。 Children -> parent

在这两个组件中，都需要一个发射器。

主控制器：

  <app-poll (changed)=this.update($event)></app-poll>

  <app-survey (changed)=this.update($event)></app-survey>

在组件中，定义一个事件发射器：

@Output() changeEmitter = new EventEmitter<any>();

当你想触发重置时，这样写：

changedEmitter.emit(<<you can insert objects here>>);

这将触发他们 parent 的 this.update() 中的调用。

在该方法中，您可以定义其他逻辑来触发重置，但是从parent-child开始，最简单的方法是绑定数据object，您可以更改：

2。 Parent-> children

  <app-survey (changed)=this.update(newValue) [data]="surveyData"></app-survey>

在主要比赛中：

private surveyData: any;

update(newValue: any){
  surveyData =  <<something>>
}

在调查中：

@Input() private data: any;

Answer 2

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

component.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
    }
  }

component.html

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

</mat-tab>

Answer 3

在 angular material8 中，有一个选项可以在用户选择时在选项卡中延迟加载组件。

您可以简单地将要延迟加载的组件包装在 ng-template 中，如下面 link 所示

https://material.angular.io/components/tabs/overview#lazy-loading

如果用户从一个选项卡移动到另一个选项卡，如何在 Angular Material 中 reset/refresh 选项卡正文数据？

How to reset/refresh tab body data in Angular Material if user move from one tab to another tab?

angular

angular-material-5

1。 Children -> parent

2。 Parent-> children