时间戳

首页 > 解决方案 > 通过单个调用在两个组件之间进行通信

angular - 通过单个调用在两个组件之间进行通信

问题描述

我陷入了一个基本场景，其中我有一个组件 ( component1)，当我在该组件上执行某个操作时，我想从另一个组件获取一些数据（准确地说，我正在从 ( component2) 发送一些内容。

在此处输入图像描述

现在，我正在使用通过公共服务共享的两个主题来做这件事，首先我从订阅的 component1 广播一些数据component2，根据这些数据执行一些操作，并且 componet2 向我发送我订阅的响应在component1. 有关详细信息，请参阅上面的快照，如上所述，这两个组件彼此不相关。

我想要实现的是有一个单一的呼叫component1，当我在will call中执行操作时component2，我会得到响应，请提供一些建议和方向来研究。

请求的代码

组件1.ts

click(data) {
  subject1.next(data);
  subject2.subscribe(s => {
    alert(s);
  });
}

组件2.ts

subject1.subscribe(s => {
  subject2.next(s+10);
});

标签： angularrxjsobservable

解决方案

您的两个组件都可以从app.component.ts不是吗？（或包含它们的任何其他父组件）

以下方法是覆盖您的用例的更自然的方式，您当前使用服务的方式对我来说似乎是一种反模式。

使用EventEmitter 的：

组件1.ts

@Output()
public dataReady = new EventEmitter<any>();
click(data) {
  dataReady.emit(data);
}
finalData(data) {
  console.log('Data has been processed by component2, result:', data);
}

组件2.ts

@Output()
public dataProcessed = new EventEmitter<any>();
processData(data) {
  // Do whatever you do in component 2 with data: s + 10?
  dataProcessed.emit(data);
}

在组件的容器中：

<app-component1 #component1 (dataReady)="component2.processData($event)"></app-component1>
<app-component2 #component2 (dataProcessed)="component1.finalData($event)"></app-component2>

但是，如果您的两个组件都“太远”以至于您无法互相调用事件，我认为正确的方法是在您的服务中处理数据而不管您的 component2（通过从 component2 移动“processData”代码为您服务）

推荐阅读