两个 angularjs 服务之间的消息传递

Question

我想在angularjs网站中实现两个服务之间的通信(通过发送和接收消息)。实际上，如果我们可以将两个服务合并为一个服务，则消息传递是不必要的。但现实是我出于某种原因不想合并它们。由于两个服务的相互依赖是不可能的(如果我错了，请纠正我)，似乎我必须让他们通过消息传递进行通信。

让我解释一下...假设我们有两个服务serA和serB。在serA，我们有

this.startTask1 = function () {
console.log("B, please do task 1")
sendMsgFromAtoB("B, please do task 1")
}
this.receiveMsgFromBtoA = function (msg) {
if (msg === "A, B has done task 1") {
console.log("A, B has done task 1"); 
console.log("task 1 is finally over!!!")
}
}

在serB，我们有

this.receiveMsgFromAtoB = function (msg) {
if (msg === "B, please do task 1") {
console.log("B is doing task 1... Done!");
sendMsgFromBtoA("A, B has done task 1")
}
}

因此，如果控制器运行serA.startTask1()，我希望在控制台中看到：

B, please do task 1
B is doing task 1... Done!
A, B has done task 1
task 1 is finally over!!!

为此，我需要做sendMsgFromAtoB和sendMsgFromBtoA，并完成receiveMsgFromAtoB和receiveMsgFromBtoA。但是，我不知道我可以通过哪种方式实现它们。

我使用了$window.addEventListener("message", ...)(即postMessage)和$window.addEventListener("storage", ...)(即StorageEvent)。但是StorageEvent不是完全跨平台的，我不确定postMessage是否适合在 1 页内发送消息。

那么有人有好主意吗？

Answer 1

你已经在 Angular 1.x 应用程序中安装了事件总线，$rootScope.除非你愿意在项目中引入第三方库(RxJS、EventEmitter3 或其他发布/订阅实现)，否则没有理由再进一步研究。

$rootScope.$on('foo', (e, arg1, arg2) => { ... });
...
$rootScope.$emit('foo', arg1, arg2);

Answer 2

循环依赖总是混合关注的标志，这是一件非常糟糕的事情。Miško Hevery，AngularJS的作者之一，在他很棒的博客上解释了一个很好的解决方案。简而言之，您可能在某处隐藏了第三个服务，这是其他两个服务真正需要的代码中唯一部分。

改变：

+---------+      +---------+
|    A    |<-----|  B      |
|         |      |  |  +-+ |
|         |      |  +->|C| |
|         |------+---->| | |
|         |      |     +-+ |
+---------+      +---------+

对此：

+---------+
+---------+              |    B    |
|    A    |<-------------|         |
|         |              |         |
|         |    +---+     |         |
|         |--->| C |<----|         |
|         |    +---+     +---------+
+---------+

另请参阅，

• AngularJS中的循环依赖和OOP问题
• Miško Hevery，构造函数中的循环依赖和依赖注入