如何在Angular中使用Web Worker？

Question

我是开发离子应用程序的新手，并尝试将任务外包给webworker。这只是理解原理的一个小例子。

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);
}

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

运行时错误：未定义（未定义：未定义）

Answer 1

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

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