javascript / expert
Snippet
Signal-basierte Web-Worker-Orchestrierung
Das Auslagern schwerer Berechnungen in Web Worker verhindert das Blockieren des Hauptthreads und sorgt für eine flüssige UI-Performance. Indem Sie den Lebenszyklus des Workers in Angular Signals kapseln, können Sie den Verarbeitungsstatus deklarativ verfolgen und asynchrone Ergebnisse direkt in den reaktiven Template-Graph integrieren.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { Injectable, signal, computed } from '@angular/core';@Injectable({ providedIn: 'root' })export class DataProcessorService {private status = signal<'idle' | 'busy'>('idle');isProcessing = computed(() => this.status() === 'busy');async processLargeDataset(data: any[]) {this.status.set('busy');const worker = new Worker(new URL('./processor.worker', import.meta.url));return new Promise((resolve) => {worker.onmessage = ({ data: result }) => {this.status.set('idle');resolve(result);};worker.postMessage(data);});}}
angular
Erklärung
1
isProcessing = computed(() => this.status() === 'busy');
Leitet ein reaktives boolesches Signal von einem privaten Statussignal ab, um UI-Feedback zu steuern.
2
const worker = new Worker(new URL('./processor.worker', import.meta.url));
Erzeugt einen neuen Thread auf Betriebssystemebene zur parallelen Ausführung von JavaScript-Logik.