来自 Angular 应用程序的全局回调答案

【问题标题】：Global Callback from Angular App来自 Angular 应用程序的全局回调
【发布时间】：2017-02-28 15:57:19
【问题描述】：

由于正在进行的集成，我目前正在尝试让 2 个 JS 应用程序在同一页面上运行（一个在 Angular 2 中，另一个在 React 中）以相互通信。目前，所有数据共享都发生在 2 之间，使用页面窗口范围内的对象（不理想，但很简单），并且由于数据不是关键的，它会做的。就是这个样子

<script>
window.sharedStuff = {oscar_winner: "LALALAND", news: "FAKE"}
</script>

// The angular 2 Application
<my-app>
</my-app>

// React App
<div class="react-app">
</div>

但是，我在从 Angular 应用程序设置回调时遇到问题，React 应用程序可以侦听并执行一些操作。基本上，当 Angular 组件中发生特定事件时，我想通知 React 应用程序它已经发生。我怎样才能做到这一点？我可以从 Angular 和 react 访问窗口范围，所以理想情况下，我想使用 window.sharedStuff 本身来定义一个回调，react 应用程序可以绑定到该回调。但我找不到任何关于如何解决这个问题的文档（也许是因为这是一个独特/奇怪的情况）。

我该怎么做呢？非常感谢您的帮助！

【问题讨论】：

你可以实现简单的观察者模式并让 Angular 应用程序广播事件，然后 React 订阅这些事件。
我说的和你不同意的一样吗？我的示例是一个快速示例，说明如何为单击事件添加事件侦听器，同样的概念也适用于观察者模式。
@navinpai 检查我设置的这个快速示例：plnkr.co/edit/NT1eGQUvoKSAnH9ZwgeB?p=info
@dfsq 是否有关于将事件广播到窗口范围而不是角度应用程序的根范围的文档？编辑：您在我发送回复时发布了示例。这看起来很完美！您能否将其发布为答案，以便我接受？谢谢！

标签： javascript angular reactjs callback

【解决方案1】：

对于像您这样的简单情况，您始终可以创建中介或 Observable 模式的一些实现。例如，快速和最简单的方法可能如下所示：

window.observer = {
  listeners: {},

  subscribe (event, callback) {
    this.listeners[event] = this.listeners[event] || []
    this.listeners[event].push(callback)
  },

  broadcast (event, data) {
    if (Array.isArray(this.listeners[event])) {
      this.listeners[event].forEach(callback => callback(data))
    }
  }
}

Angular 2 应用程序可以使用它通过broadcast 方法推送数据。另一方面，React 应用可以订阅相同的 window.observer 并设置它的状态：

window.observer.subscribe('name.selected', name => {
  this.setState({ name })
})

查看 Angular 2 和 React 应用程序的简单演示：http://plnkr.co/edit/NT1eGQUvoKSAnH9ZwgeB?p=preview

【讨论】：

【解决方案2】：

为什么不给窗口对象添加一个事件监听器，让你的 React 应用触发 Angular 接收到的事件，反之亦然？

window.addEventListener('click', function () { alert('hello world') });

【讨论】：

问题与DOM事件无关。
概念应该是一样的，设置自定义事件并为其添加监听器。