angular - angular 2 和纯 javascript 之间的通信

Question

我正在构建一个 angular 应用程序，但我必须与外部 javascript 进行通信。

场景
在应用程序初始化期间，我使用以下命令将两个 iframe 注入(inject) index.html

document.body.appendChild(iframe);

我在 index.html 中运行脚本并且有多个函数，其中一个是 getData();当应用程序初始化时，我必须从 angular 应用程序组件向此函数发送数据。如何解决这个问题？我知道如何从 javascript 到 angular 进行通信，但不是相反。请帮我。我很震惊。

Answer 1

基本通信可以通过回调来执行。

回调可以由 Angular 或非 Angular 应用程序定义。取决于沟通的方向。

@Injectable()
class GlobalService {
  constructor() {
    window.vanillaToAngularCallback = data => {
      // communicate with other Angular providers
    }
  }
}

和/或

window.angularToVanillaCallback = data => {
  // communicate with other vanilla JS code
}

哪里 angularToVanillaCallback应该在 Angular 内部调用，并且 vanillaToAngularCallback在 Angular 之外被称为。应正确选择第一次回调调用的时间；回调不应由一侧调用，直到它们由另一侧定义。

最好将非 Angular 部分保留为 Webpack 包。这样引用 window可以避免，并且可以使用通用类通过回调或 RxJS 主题与 Angular 部分进行通信。