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

【问题标题】：Messaging between two angularjs services两个 angularjs 服务之间的消息传递
【发布时间】：2017-07-05 22:54:31
【问题描述】：

我想在一个 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 页内发送消息。

那么有人有什么好主意吗？

【问题讨论】：

如果服务B中的任务是异步的，返回一个promise。如果任务是同步的，只需使用return statement。

标签： javascript angularjs event-handling angular-services postmessage

【解决方案1】：

您已经在 Angular 1.x 应用程序中获得了事件总线，$rootScope。除非您愿意在项目中引入第三方库（RxJS、EventEmitter3 或其他 pub/sub 实现），否则没有理由进一步研究。

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

【讨论】：

【解决方案2】：

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

变化：

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

到这里：

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

另见，

【讨论】：