5

这是我的示例代码

主控制器

<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。在这里，如果用户从一个选项卡移动到另一个选项卡，我想刷新\重置一个选项卡数据。

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

4

3 回答 3

8

如果不想使用@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>
于 2018-04-03T13:04:02.650 回答
2

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

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

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

于 2019-06-08T18:37:29.850 回答
1

您可以在此处阅读有关组件交互类型的信息。

你需要这样的东西：

1. 孩子 -> 父母

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

主控制器：

  <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.父母->孩子

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

在主要比赛中：

private surveyData: any;

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

在调查中：

@Input() private data: any;
于 2018-04-03T12:16:08.177 回答