Angular 库中的 Web Worker

利用 Angular 中的 Web Worker 实现多线程应用

typescript
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { WorkerService } from 'angular-web-worker';
@Component({
  selector: 'app-root',
  template: `
    
      计算结果： {{ result }}
    
    开始计算
  `,
})
export class AppComponent implements OnInit {
  result: number;
  constructor(private workerService: WorkerService) {}
  ngOnInit() {}
  calculate() {
    // 创建 Web Worker
    const worker = this.workerService.create(`
      self.onmessage = function(event) {
        const result = event.data.number * 2; // 在这里执行复杂的计算
        self.postMessage(result);
      };
    `);
    // 监听 Web Worker 的消息
    worker.onmessage.subscribe((event) => {
      this.result = event.data;
      worker.terminate(); // 计算完成后终止 Worker
    });
    // 向 Web Worker 发送消息
    worker.postMessage({ number: 5 });
  }
}