ng  g  webWorker webWorkerName 用于创建一个Worker 线程,不知道Worker的同学可以看看阮一峰老师的解释

 先创建一个webWorker

/// <reference lib="webworker" />
//监听事件
addEventListener('message', ({ data }) => {const response = `worker response to ${data.type}`;// 回应事件postMessage(response);
});

再来看看在angular文件中怎么使用

//app.component.ts
import { Component,OnInit,OnDestroy } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit,OnDestroy {//定义一个workerprivate worker?:Worker = undefined;//向worker线程发送数据getMessage(){this.worker.postMessage({type:'get'});}ngOnInit(): void {this.startWorker();}ngOnDestroy(): void {this.stopWorker();}//新建线程startWorker():void{if(typeof Worker !== 'undefined'){this.worker = new Worker('./webworker/count.worker',{ type: 'module' });//不加type会找不到文件// 监听worker线程发送过来的数据this.worker.onmessage = (event) =>{console.log(event.data);}// 抓取worker线程的报错this.worker.onerror = (error) =>{console.error(error);}} else {console.warn('do not support worker!');}}stopWorker():void{if(this.worker){this.worker.postMessage({type:'stopAll'});// 关闭主线程this.worker.terminate();this.worker = undefined;}}
}

主线程：浏览器原生提供Worker()构造函数，用来供主线程生成 Worker 线程。

Worker()构造函数返回一个 Worker 线程对象，用来供主线程操作 Worker。Worker 线程对象的属性和方法如下。

• Worker.onerror：指定 error 事件的监听函数。
• Worker.onmessage：指定 message 事件的监听函数，发送过来的数据在Event.data属性中。
• Worker.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
• Worker.postMessage()：向 Worker 线程发送消息。
• Worker.terminate()：立即终止 Worker 线程。

Worker 线程有一些自己的全局属性和方法。（可以用self,this,或者什么都不用）

• self.name： Worker 的名字。该属性只读，由构造函数指定。
• self.onmessage：指定message事件的监听函数。
• self.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
• self.close()：关闭 Worker 线程。
• self.postMessage()：向产生这个 Worker 线程发送消息。
• self.importScripts()：加载 JS 脚本。