Angular 替换组件

Question

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

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

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

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

Answer 1

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

• changes.componentOne
• changes.componentTwo

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

• changes.componentOne.firstchange - 这意味着这是组件发送的第一个更改

Answer 2

这是组件间通信。您应该使用 on this Angular documentation page.

中描述的技术之一

我个人比较喜欢 communication through a service 因为组件根本就没有耦合：通信方法不依赖于它们包含在 DOM 所以你可以随意移动它们，它赢了'休息。