使網絡工作者與Angular2/Zone.js合作

Question

我在我的Angular2應用程序中使用網絡工作者。當我從工作人員觸發的回調（onmessage）更新模型狀態時，UI不會刷新。

我的理解是，該過程依賴於Zone.js猴子修補所有類型的瀏覽器功能，以便能夠檢測XHR或超時之類的更新（以及從setTimeout開始工作的狀態更新）。這應該包括對網絡工作者的支持嗎？我是否必須以某種方式明確觸發更新？

Answer 1

嘗試使用NgZone並引發像這樣的更新：

zone.run(() => { 
    // the change detection will run after this function 
}); 

Answer 2

一個從官方examples repoexample如下圖所示：

import { 
    UIMessageBus, 
    UIMessageBusSink, 
    UIMessageBusSource 
} from "angular2/src/web-workers/ui/application"; 

var worker = new Worker("loader.js"); 
var bus = new UIMessageBus(new UIMessageBusSink(worker), new  UIMessageBusSource(worker)); 
var VALUE = 5; 

document.getElementById("send_echo") 
    .addEventListener("click", (e) => { 
     var val = (<HTMLInputElement>document.getElementById("echo_input")).value; 
    bus.sink.send({type: "echo", value: val}); 
}); 
bus.source.listen((message) => { 
    if (message.data.type === "echo_response") { 
document.getElementById("echo_result").innerHTML = 
    `<span class='response'>${message.data.value}</span>`; 
    } else if (message.data.type === "test") { 
bus.sink.send({type: "result", value: {id: message.data.id, value: VALUE}}); 
    } else if (message.data.type == "result") { 
document.getElementById("ui_result").innerHTML = 
    `<span class='result'>${message.data.value}</span>`; 
    } else if (message.data.type == "ready") { 
bus.sink.send({type: "init"}); 
} 
});