javascript - Angular 2跨应用程序(根组件)通信

Question

我正在寻找一种页面上多个根组件之间交互的方式。背景是，我正在为 CMS 开发一堆模块，这些模块应该能够共享数据、消费事件，或者在用户决定将它们添加到页面时相互了解。由于 CMS 的性质，这些组件会独立引导。

在 Angular 1 中，可以使用 JQuery 获取 Controller 类的引用:

$("#MyApplication").controller();

Angular 2 是否以某种方式提供了类似的方式甚至更好的方法来让它们相互通信？

Answer 1

您可以使用共享服务。

class SharedService {
  ...
}

var sharedService = new SharedService();

bootstrap(App1, [provide(SharedService, {useValue: sharedService})]);
bootstrap(App2, [provide(SharedService, {useValue: sharedService})]);

在您想要与其他 Angular 应用程序通信的组件中，只需注入(inject)服务

constructor(private sharedService:SharedService) {
  sharedService.someObservable.subscribe(...);
  sharedService.someObservable.emit(...);
}