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>

在每个标签中，有不同的控制器名为 - 投票和调查。在这里，我想刷新\重置一个标签数据，如果用户从一个移动到另一个。

实现这一目标的任何简单方法？

Answer 1

如果您不想使用@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 2

你可以read about component interaction types here。

你需要这样的东西：

1。儿童 - ＆gt;父

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

MainController：

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

这将在其父级的this.update（）中触发调用。

在该方法中，您可以定义其他逻辑来触发重置，但是从父子开始，最简单的方法是绑定一个可以更改的数据对象：

2。父 - ＆GT;儿童

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

主要内容：

private surveyData: any;

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

在调查中：

@Input() private data: any;

Answer 3

在角形材料8中，有一个选项，当用户选择组件时，可以将组件延迟加载到选项卡中。

您只需将组件包装成可以延迟加载到ng-template中，如下面的链接所示

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

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

3 个答案:

1。儿童 - ＆gt;父

2。父 - ＆GT;儿童