angular 2 和 pure javascript 之间的通信
Communication between angular 2 and pure javascript
我正在构建一个 angular 应用程序,我处于必须与外部 javascript 通信的情况。
场景
在应用程序初始化期间,我使用
将两个 iframe 注入 index.html
document.body.appendChild(iframe);
我在 index.html 中有脚本 运行 并且有多个函数,其中一个是 getData();当应用程序初始化时,我必须从 angular 应用程序组件向此函数发送数据。怎么办?我知道如何从 javascript 到 angular 进行交流,但反过来却一窍不通。请帮我。我震惊了。
可以通过回调进行基本通信。
回调可以由 Angular 或非 Angular 应用程序定义。取决于沟通的方向。
@Injectable()
class GlobalService {
constructor() {
window.vanillaToAngularCallback = data => {
// communicate with other Angular providers
}
}
}
And/or
window.angularToVanillaCallback = data => {
// communicate with other vanilla JS code
}
其中 angularToVanillaCallback
应该在 Angular 内部调用,而 vanillaToAngularCallback
应该在 Angular 外部调用。正确选择第一次回调的时间;回调不应该被一方调用,直到它们被另一方定义。
最好将非 Angular 部分保留为 Webpack 包。这样可以避免对 window
的引用,并且可以通过回调或 RxJS 主题使用常见的 类 与 Angular 部分进行通信。
我正在构建一个 angular 应用程序,我处于必须与外部 javascript 通信的情况。
场景 在应用程序初始化期间,我使用
将两个 iframe 注入 index.htmldocument.body.appendChild(iframe);
我在 index.html 中有脚本 运行 并且有多个函数,其中一个是 getData();当应用程序初始化时,我必须从 angular 应用程序组件向此函数发送数据。怎么办?我知道如何从 javascript 到 angular 进行交流,但反过来却一窍不通。请帮我。我震惊了。
可以通过回调进行基本通信。
回调可以由 Angular 或非 Angular 应用程序定义。取决于沟通的方向。
@Injectable()
class GlobalService {
constructor() {
window.vanillaToAngularCallback = data => {
// communicate with other Angular providers
}
}
}
And/or
window.angularToVanillaCallback = data => {
// communicate with other vanilla JS code
}
其中 angularToVanillaCallback
应该在 Angular 内部调用,而 vanillaToAngularCallback
应该在 Angular 外部调用。正确选择第一次回调的时间;回调不应该被一方调用,直到它们被另一方定义。
最好将非 Angular 部分保留为 Webpack 包。这样可以避免对 window
的引用,并且可以通过回调或 RxJS 主题使用常见的 类 与 Angular 部分进行通信。