如何在 Angular 中创建发布者/订阅者模型？答案

【问题标题】：How do I create a publisher/subscriber model in Angular?如何在 Angular 中创建发布者/订阅者模型？
【发布时间】：2015-09-22 07:39:33
【问题描述】：

我一直在使用 Angular，并且一直在尝试找到一种在整个组件树中使用 pub/sub 机制的方法。

似乎 EventEmitter 只发出一个可以订阅更高级别的事件 - 但不能更多。同样，它只在树上发出事件，但现在向下。

plunker

相关代码在这里：

class App {
  onAncestor($event) {
     console.log('in ancestor, decendent  clicked',$event);
  } 
}

 ...
class Entities {
   ....
   onParent($event) {
     console.log('in entities parent, child  clicked',$event);
   } 

   onGrandParent($event) {
      console.log('in grand parent, grandschild  clicked',$event);
   }

}

只调用 onParent，从不调用 onGrandparent 或 onAncestor。同样，它也不会向下发布。

【问题讨论】：

这里是一个如何使用 Observables/EventEmitter 为 pub sub syntaxsuccess.com/viewarticle/pub-sub-in-angular-2.0 的例子

标签： angular publish-subscribe

【解决方案1】：

Angular 2 附带了一个名为 RxJs 的 observables 库，因此可用于创建我们可以订阅和提交事件的服务。

然后我们使用依赖注入机制将该服务注入到应用程序中我们需要它的任何位置。

因此不再需要广播/发送事件机制，因为它被更强大的 observables 机制所取代，该机制内置在框架中的任何地方：EventEmitter 是可观察的，表单值是可观察的，@ 987654324@ 可以返回 observables 等。

请参阅repository，了解如何使用 RxJs 构建服务以进行发布/订阅的示例。

【讨论】：

谢谢。如果是这样，那为什么 Angular2 有一个 EventEmitter 呢？
看看 EventEmitter github.com/angular/angular/blob/master/modules/angular2/src/…987654322@类上的 cmets

【解决方案2】：

在 AngularJS 1.x 世界中，您可以使用 ng-contexts，这是我们在我的组织中编写的一个轻量级插件，可以使用 为应用程序启用快速和惰性的状态管理发布/订阅 模型。

Intuitive state management for AngularJS applications

如果您已经从 AngularJS 继续前进，显然选择 AngularUniversity 的答案。

【讨论】：

【解决方案3】：

https://www.npmjs.com/package/@fsms/angular-pubsub

this.pubsubService.subscribe({ ?// Subscribing to a message
        messageType: PlaceOrder.messageType,
        callback: (msg) => console.log('received', msg),
      })

this.pubsubService.publish( ?// Publishing a message
      new OrderCreated({
        orderId: new Date().getTime().toString(36),
        item: '20 Apples',
      })
    );

【讨论】：

【解决方案4】：

看看这个 lib ng-event-bus (https://www.npmjs.com/package/ng-event-bus)

它是基于 RxJS 的消息/事件总线服务，适用于受 NgRadio 启发的 Angular 应用程序。

您可以发布消息，并在代码的其他部分订阅它。

【讨论】：