无法将事件从javascript调度到组件（离子）

Question

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

我这样做的想法是使用元素的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的新手。 任何帮助将不胜感激。

Answer 1

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

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

因此，该服务已加载，并且能够在脚本加载时注册事件侦听器。