Angular 2网络工作者

根据您可以找到的解决方案here,我构建了一个使用WebWorker完成其任务的简单类.

你需要3个文件来拥有一个工作的工人.

> file-loader.d.ts – 需要加载WebWorker文件

declare module "file-loader?name=[name].js!*" {
  const value: string;
  export = value;
}

> background-worker.ts – 在您的应用程序中可用的类

import * as workerPath from "file-loader?name=[name].js!./web-worker-example";


class BackgroundWorker {

    constructor() {
        let worker = new Worker(workerPath);
        worker.onmessage = this.handleMessage;
        worker.postMessage('Caller: Help Me for background Work');

        // Message content can contain only Javascript Objects
        //
        // For Documentation:
        // https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage
        //
    }

    private handleMessage( this: Worker,message: MessageEvent ) {

        console.log( message.data );

        switch( message.data ) {
        case 'Worker: Working':
            // ... Something To Do ...
            break;
        case 'Worker: Ok,I will Do It':
            // ... Something To Do ...
            break;
        case 'Worker: No,I can not':
            // ... Something To Do ...
            break;
        case 'Worker: Done':
            this.terminate();
            break;
        }
    }
}

> web-worker-example.ts

// ****************************************************************** Worker Bridge
// self is a keyword: Reference to this Worker 
self.onmessage = bridge;

function bridge( message: MessageEvent ) {
    HandleWork( message.data );
    CallBack('Done');
    // use:
    //       self.close();
    // if you need to terminate worker from Worker Environment.
}

function CallBack( message: string ) {
    self.postMessage('Worker: ' + message,undefined);
}

// ****************************************************************** Worker Body
function HandleWork( workTask: string ) {
    if( workTask == 'Caller: Help Me for background Work' ) {
        CallBack('Ok,I will Do It');

        DoVeryComplexWork();
        return;
    }

    CallBack('No,I can not');
}

function DoVeryComplexWork() {

    // ... Something To Do ...

    // Example:
    for( let i: number = 0; i < 1000000000; i++ ) {
        if( i % 100000000 == 0 ) {
            CallBack('Working');
        }
    }
}

要启动Worker,只需实例化worker new BackgroundWorker()并查看控制台.

旧版

我遇到了同样的问题,并通过构建扩展一类WebWorker的服务来解决它.
在实践中,服务工作通过向WebWorker传递两个东西,数据和一个详细说明数据的函数.

我在GitHub上发布了一个例子.所有必需的逻辑都在以下两个文件中.

fibonacci-worker.service.ts

worker.ts

看一下app.component.ts的调用方法.

问候.