Question

将SharedWorker添加到@angular/cli >1.2生成的项目的具体步骤是什么。我希望在TypeScript中定义SharedWorker（具有完整/正确的类型定义编辑器支持），与主项目共享接口，并与主项目一起连续编译和测试。

我还没有发现一个示例或博客文章，介绍如何修改cli生成的项目以包含Worker或SharedWorker。但是，有几个帖子（例如this一个）显示了如何转换整个cli生成的项目以将其作为Web worker运行。但那不是我的用例。

我想将与Lovefield数据库的交互限制在与主应用程序不同的进程中运行的SharedWorker。

虽然我尝试了一下，但我没有取得多大进展。希望有人能为我（以及未来的读者）节省很多时间。

Answer 1

我按照以下步骤开始工作：

创建文件夹src\app\shared-worker

使用以下内容创建文件src\app\shared-worker\shared-worker.d.ts：

SharedWorker定义

declare module SharedWorker {
    interface AbstractWorker extends EventTarget {
        onerror: (ev: ErrorEvent) => any;
    }
    export interface SharedWorker extends AbstractWorker {
        port: MessagePort;
        onconnect: (messageEvent: MessageEvent) => void;
    }
}
declare var SharedWorker: {
    prototype: SharedWorker.SharedWorker;
    new(stringUrl: string, name?: string): SharedWorker.SharedWorker;
};
// Merely added the onconnect() method to the file provied via:
// npm install --save-dev retyped-sharedworker-tsd-ambient
// Definitions by: Toshiya Nakakura <https://github.com/nakakura>

使用以下演示内容创建文件src\app\shared-worker\shared-worker.ts：

共享工作源

/// <reference path=".\shared-worker.d.ts" />

(<any>self).onconnect = (connectEvent: MessageEvent) => {
    const messagePort: MessagePort = (connectEvent.ports as MessagePort[])[0];

    messagePort.onmessage = function (messageEvent: MessageEvent) {
        const workerResult: number = messageEvent.data.firstNumber * messageEvent.data.secondNumber;
        messagePort.postMessage(workerResult);
    };

};

更新src\app\app.component.ts，如下所示：

<强> AppComponent

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';

@Component({
    selector: 'app-root',
    template: `
<input type="number" [(ngModel)]="firstNumber" />
<input type="number" [(ngModel)]="secondNumber" />
<hr /><button (click)="postMessageToSharedWorker()">Invoke Shared Worker</button>
<hr /><div>Result: {{result$ | async}}</div>`
})
export class AppComponent implements OnInit {
    public firstNumber = 4;
    public secondNumber = 8;
    private resultSubject = new Subject<number>();
    private sharedWorker: SharedWorker.SharedWorker;
    public result$: Observable<number>;

    public ngOnInit(): void {
        this.result$ = this.resultSubject.asObservable();
        if ('SharedWorker' in window) {
            this.sharedWorker = new SharedWorker('app/shared-worker/shared-worker.js');
            this.sharedWorker.port.onmessage = (messageEvent: MessageEvent) => {
                this.resultSubject.next(messageEvent.data);
                this.changeDetectorRef.detectChanges();
            };
        }
    }

    public postMessageToSharedWorker() {
        if (!('SharedWorker' in window)) {
            return;
        }
        this.sharedWorker.port.postMessage({ firstNumber: this.firstNumber, secondNumber: this.secondNumber });
    }
    constructor(private changeDetectorRef: ChangeDetectorRef) { }
}

将"app/shared-worker/shared-worker.js"添加到apps.assets

.angular-cli.json

安装concurrently作为开发依赖项：npm i -D concurrently

创建package.json个脚本

<强>的package.json

"wrk-w": "tsc --noLib --experimentalDecorators --watch node_modules/typescript/lib/lib.es6.d.ts src/app/shared-worker/shared-worker.d.ts src/app/shared-worker/shared-worker.ts",
"dev": "concurrently --kill-others \"npm run wrk-w\" \"npm run start\""

Answer 2

只需安装@ types / sharedworker并将其添加到“类型”数组选项中的tsconfig.app.json中。

如何配置Angular-CLI生成的项目以包含SharedWorker

2 个答案: