角度替换组件答案

【问题标题】：Angular replace component角度替换组件
【发布时间】：2019-04-18 12:38:34
【问题描述】：

有一种情况是数据是从两个不同的组件发送的；假设OneComponent 和TwoComponent 有一个ResultComponent 通过Input() 装饰器接收这些数据。此外，在ResultComponent 中，数据使用OnChanges 接口进行合并：

  ngOnChanges(changes: SimpleChanges) {
    if (changes['dataFromCompTwo']) {
      this.dataFromComp = this.dataFromCompTwo;
    }
  }

并且数据显示在这个组件中，但是组件被实例化了两次并且数据是双倍的。如何检查数据是否已从其中一个组件发送并仅显示最后发送的数据？

STACKBLITZ => 我想只显示一次这是结果。

【问题讨论】：

【解决方案1】：

这是组件间的通信。您应该使用on this Angular documentation page 描述的技术之一。

我个人更喜欢communication through a service，因为组件完全不耦合：通信方法不依赖于它们是否包含在 DOM 中，因此您可以随意移动它们，它不会中断。

【讨论】：

【解决方案2】：

如果您有两个组件发送更改，那么您可以使用以下方式访问它们：

SimpleChanges 有另一个名为 firstChange 的属性，您可以使用它来检查这是否是来自特定组件的第一个更改，如下所示：

【讨论】：