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

这是我的示例代码

主控制器

<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的不同控制器。在这里，如果用户从一个选项卡移动到另一个选项卡，我希望刷新\重置一个选项卡数据

有什么简单的方法可以做到这一点吗？

你可以

你需要这样的东西：

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

1.子项->父项 在这两个组件中，都需要一个发射器

主控制器：

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

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

---

如果不想使用

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

component.html

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

</mat-tab>

---

在angular material 8中，当用户选择组件时，有一个在选项卡中惰性加载组件的选项

您可以简单地将组件包装为惰性加载到ng模板中，如下面的链接所示

---

可能重复@David我尝试了上述代码，但它对我无效。它直接导航到我不想要的全新路线。需要保留在当前选项卡上，但在选项卡更改后应刷新数据。请参阅我的答案，如果它有助于上述方法之外的任何其他方法？下面的评论反映了这一点，尽管我不认为该解决方案是干净的代码。直接调用不同的组件函数感觉是不对的，因为在我看来，它应该封装在组件内部，并通过它的接口访问。是的，没错。但我是新手，所以我无法决定哪一个更好。你能解释一下或参考一下关于评论的代码吗？我将不胜感激。。！Angular在DOM中使用自动更改检测。如果somhing触发了它，它只会重新呈现文档的一部分-仅呈现文档的一部分，我认为它需要更新，因为这是一项资源繁重且成本高昂的操作。要缩小所需的重新渲染部分的范围，您应该遵循官方的建议：从父级到子级使用直接绑定，从子级到父级使用事件发射器。由于DOM是一种树表示形式，遵循该树的流程，您可以实现相当快的更新。这个答案对你有帮助吗？我尝试过这样设置，但是没有定义this.surveyComponent，因此刷新不会被触发。。。知道为什么吗？在纸上看起来不错though@BHANG可能会发布一个带有stackblitz的新问题示例my bad，my components不是父子关系；-）谢谢你的回复

private surveyData: any;

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

@Input() private data: any;

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

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

</mat-tab>