无法将事件从 javascript 分派到组件（离子）答案

【问题标题】：Cannot dispatch event from javascript to Component (Ionic)无法将事件从 javascript 分派到组件（离子）
【发布时间】：2018-11-21 19:18:24
【问题描述】：

我需要通知组件脚本文件已完成加载。

我这样做的想法是使用元素的 onload 事件来调度事件。另一方面，服务将为此事件注册一个事件侦听器，并等待客户端将自己注册到一个可观察的对象，该可观察对象将在事件到达时通知。

我试过了，但没有成功。似乎没有发送事件。控制台中没有抛出任何错误。

我目前正在做的就是这个。

index.html：

<script>
function loadFinish() {
    onLoadFinish = new CustomEvent('onLoadFinish', {
      detail: { },
      bubbles: true,
      cancelable: false
    });
    window.dispatchEvent(onLoadFinish);
}
</script>

<script src="opencv.js" onload="loadFinish();" type="text/javascript">

调用了 loadFinish 但我不知道 dispatchEvent 是否有效...

服务：

export class JsLoadService {
    private subjectJsLoad = new Subject<any>();
    constructor() {
        window.addEventListener('onJSLoadFinish', (event) => {
            console.log("notifying...."); // this never show up in the console.
            this.subjectJsLoad.next((event as any).detail)
        })
    }

    onJsLoadFinish():Observable<any> {
        return this.subjectJsLoad.asObservable();
    }
}

组件：

ngOnInit(): void {
    this.jsLoadService.onJsLoadFinish().subscribe( data => {
        // also never called...
      console.log("onJsLoadFinish");
    });
  }

也许 WebView 正在干扰窗口对象的事件，但我不确定，我是 Ionic 的新手。任何帮助将不胜感激。

【问题讨论】：

可能dispatchEvent 发生在您的服务初始化之前。并将事件名称onLoadFinish与onJSLoadFinish进行比较
也许之前执行了调度，但是脚本加载卡住了所有的应用程序加载（我什至无法访问 chrome 检查控制台，直到加载完成）。我的代码中的名称是正确的，这是我发布问题时的拼写错误。

标签： javascript angular ionic-framework ionic3

【解决方案1】：

我发现了我的问题。该事件是在服务初始化之前调度的，脚本文件的加载卡住了包括服务加载在内的所有应用程序初始化。所以我通过在脚本标签中包含 async 属性来解决：

<script async src="opencv.js" onload="loadFinish();" type="text/javascript">

所以服务被加载并且能够在脚本加载时注册事件监听器。

【讨论】：