Angular 中订阅来自 iframe 的事件的最佳实践是什么？答案

【问题标题】：What is the best practice in Angular for subscribing to events coming from an Iframe?Angular 中订阅来自 iframe 的事件的最佳实践是什么？
【发布时间】：2018-10-05 08:01:05
【问题描述】：

我有一个用 Angular 编写的应用程序。我的一个组件包含一个 iframe。在 Iframe 中，有一个（非角度的）应用程序可以发送 javascript 事件。在我的组件中，我想订阅这些事件，但不确定最好的方法是什么。如果我使用的是原生 Javascript，我会执行以下操作：

window.addEventListener('message', function(e) {
    console.log(e.data);
});

【问题讨论】：

标签： javascript angular iframe event-handling dom-events

【解决方案1】：

你可以为此创建一个 observable

  let iFrameEvents = Observable.create((observer) => {
   let eventSource = // create event source here;
   eventSource.onEvent = (event) => observer.next(event.data); // send the new data
  });

你可以订阅这个 observable 来获取你的数据

【讨论】：

【解决方案2】：

例如，将window.addEventListener 用作对服务器的任何异步调用。本质上——创建一个服务iframeCommunicator（你可以选择任何你喜欢的名字）并在里面使用这个代码。将其包装在事件发射器（或任何您想要的可观察对象）中，然后将服务注入您的组件并像使用套接字或 http 一样使用它。

【讨论】：