Angular 2和纯JavaScript之间的通信

Question

Angular 2和纯JavaScript之间的通信

4

我正在开发一个Angular应用程序，并且遇到了需要与外部JavaScript进行通信的情况。

场景在应用程序初始化期间，我使用以下方式将两个iframe注入到index.html中：

document.body.appendChild(iframe);

我有一个运行在index.html中的脚本，其中有多个功能之一是getData(); 我需要在angular应用程序组件初始化时向该函数发送数据。怎么做？我知道如何从javascript与angular进行通信，但不知道如何实现相反的方式。请帮助我。我卡住了。

- Vikhyath Maiya

Angular应用程序在window上公开了一个回调函数，由非Angular应用程序调用。非Angular应用程序在window上公开了一个回调函数，并由Angular应用程序调用。这是双向通信。 - Estus Flask

你能否提供一些小例子或指引我到正确的资源？ - Vikhyath Maiya

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Estus Flask · Accepted Answer

基本通信可以通过回调函数完成。

回调函数可以由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部分进行通信。