如何在Angular中创建发布/订阅模式？

Question

我一直在使用Angular并试图找到一种方法来跨整个组件树使用发布/订阅机制。

似乎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。 同样，它也不会向下发布。

- Lior

---

以下是如何使用Observables/EventEmitter进行发布订阅的示例：http://www.syntaxsuccess.com/viewarticle/pub-sub-in-angular-2.0 - TGH

Answer 1

随着Angular 2的推出，带来了一个名为RxJs的可观察对象库，可以用它来创建我们可以订阅和提交事件的服务。然后我们使用依赖注入机制将该服务注入到任何需要它的应用程序中。因此，不再需要广播/发射事件机制，因为它已被更强大的可观察对象机制所取代，该机制在框架的各个地方都内置了：EventEmitter是一个可观察对象，表单值是可观察对象，http可以返回可观察对象等等。请参见repository，了解如何使用RxJs构建发布/订阅服务的示例。

- Angular University

---

如果是这样，为什么Angular2还需要一个EventEmitter呢？谢谢。 - Lior

请查看 EventEmitter 类的注释，链接为 https://github.com/angular/angular/blob/master/modules/angular2/src/core/facade/async.ts - Angular University

Answer 2

在 AngularJS 1.x 世界中，你可以使用 ng-contexts，这是我们组织编写的一个轻量级插件，用于启用基于 pub/sub 模型的应用程序的快速和延迟状态管理。

AngularJS 应用程序的直观状态管理

如果您已经从 AngularJS 迁移，请显然选择 AngularUniversity 的答案。

- Tony Brasunas

Answer 3

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

它是一个基于 RxJS 的消息/事件总线服务，为 Angular 应用程序提供了灵感，受到 NgRadio 的启发。

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

- Ivan Gavlik

Answer 4

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',
      })
    );

- Rupesh Kumar Tiwari