首页 > 解决方案 > 在 Angular 应用程序中使用模块中的代码的 Web 工作者

问题描述

我有一个角度应用程序,我需要使用 web worker 来执行一些代码,但代码依赖于某个模块。

工人是这样初始化的,如果不需要外部模块,它可以正常工作

  var worker = new Worker('data:text/javascript;base64,' + btoa('self.postMessage((' + String(code) + '\n)());'));

code函数参考在哪里。

那么我怎样才能使这项工作呢?最好没有实时加载模块。

标签: angularweb-worker

解决方案


您必须从您的工作人员定义一个模块(文件)并导入您需要的外部模块。像这样:

外部模块.js:

var value = "my value";
module.exports = value;

worker.js

var value = require('./outermodule');

addEventListener('message', ({ data }) => {
  const response = `worker response: ${value}` ;
  postMessage(response);
});

主线程:index.js

const worker = new Worker('./worker', { type: 'module' });
  worker.onmessage = ({ data }) => {
    console.log(`got message from worker: ${data}`);
  };
  worker.postMessage('hello');

阅读材料:

  1. https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker
  2. https://angular.io/guide/web-worker

推荐阅读