使用角度 2 服務的工人

/app/services/greeting.service.ts：

import { Injectable } from '@angular/core';
import {greetingTypes,request,response} 
            from  './greeting.interface'

@Injectable()
export class Greeting{

    private worker;
    constructor(){
       this.worker = new Worker('../workers    /greeting.worker');
    }

    sayHello(message:string, answerCallback:Function){
        let requestData:request =   
            {'type':greetingTypes.HELLO ,'message':message} ;

        this.worker.postMessage(requestData); 
        this.worker.onmessage = (msg)=>{
            let response:response = msg.data; 

            if(response.type == greetingTypes.HELLO){
                answerCallback(response.answer)
            }
        }
    }

    sayBye(message:string, answerCallback:Function){
        let requestData:request =     {'type':greetingTypes.BYE ,'message':message}; 

        this.worker.postMessage(requestData); 
        this.worker.onmessage = (msg)=>{
            let response:response = msg.data; 

            if(response.type == greetingTypes.BYE)
                answerCallback(response.answer)
        }
    }
} 

app/services/greeting.interface.ts：

export enum greetingTypes{
    BYE,
    HELLO
}

export interface request{
   type:greetingTypes,
   message:string 
}

export interface response{
    type:greetingTypes,
    answer:string
}

app/workers/greeting.worker.ts：

require("globals");
import {greetingTypes,request,response} from 
            '../services/greeting.interface';

self.onmessage = (msg)=> {
   let request:request = msg.data;
   let responseData:response;
   if(request.type ==  greetingTypes.HELLO)
        console.log('worker got the message: ' + 
                        request.message);
        responseData = {'type':greetingTypes.HELLO, 
                            'answer': 'HELLO!'};
        global.postMessage(responseData);

   if(request.type == greetingTypes.BYE )
        console.log('worker got the message: ' +request.message);
        responseData = {'type':greetingTypes.BYE ,  
                           'answer':'goodBye!'};
            global.postMessage(responseData);

    };

app/app.component.ts：

import {Component} from "@angular/core";
import {Greeting} from './services/greeting.service';
@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
    providers:[Greeting]
})
export class AppComponent {

    constructor(private greeting:Greeting){}

public tapHello() {

    this.greeting.sayHello('hi',
        (answer)=>{console.log('answer from worker : '+ answer)});
}

public tapBye() {
    this.greeting.sayBye('bye',
        (answer) => {console.log('answer from worker : ' + answer)});
}

}

app/app.component.html：

<StackLayout>
    <Button text="sayBye" (tap)="tapBye()"></Button>
    <Button text="sayHello" (tap) = "tapHello()"></Button>
</StackLayout>