如何在Angular中使用WebWorker？

Question

我在开发离子应用程序方面还很陌生，并尝试将任务外包给网络工作者。这只是一个理解原理的小例子。

tabs.ts:

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor() {
        this.worker();
  }

  worker(){
    let myWorker : Worker = new Worker('worker.js');

    myWorker.onmessage = function(event){

            console.log(event.data.value;);

            };

    myWorker.onerror = function(event){
              throw new Error(event.message + " (" + event.filename + ":" + event.lineno + ")");
      }
}
}

worker.js:

self.onmessage = function (event) {
  console.log('recieved');
  self.postMessage({value : event.data.value * 2});
}

self.onerror = function (event) {
    console.log(error);
    self.postMessage(event);
}

我的问题是 Worker 没有收到消息，只是抛出一个未定义的错误。

Runtime Error: undefined(undefined:undefined)

Answer 1

您需要将 worker.js 文件放入 assets 文件夹中，如下所示：

let myWorker : Worker = new Worker('../assets/worker.js');

如何在Angular中使用WebWorker？

How to use WebWorker in Angular?

javascript

web-worker

typescript

ionic3

angular