在Angular 2中运行昂贵的任务而不阻塞UI

我有一个Angular 2应用程序，使用Angular CLI创建，具有以下事件序列：

发生异步事件（例如，用户单击按钮）

1.1动画被触发

1.2运行昂贵的流程。这需要几秒钟

用户界面会随着昂贵流程的结果而更新

我遇到的问题是，当昂贵的进程运行时，动画和UI冻结

我制作了这个简化版本，显示了这个问题：

我尝试使用NgZone的

runOutsideAngular

来运行这个昂贵的进程，但它与内联运行是一样的。我也尝试过使用Zone.js库，但我不熟悉它，我得到了一个错误“Zone.js.d.ts”不是一个模块

如何将这个昂贵的进程“分叉”到一个并行线程/区域中，然后在完成后将其合并到主区域中，以优雅地更新UI？或者任何合适的解决方案。。。它不必显式地使用区域

---

非常感谢

我知道他们已经推荐了网络工作者，但我没有看到任何具体提到网络工作者的回答/评论。Web Workers的唯一缺点是不能在

worker

内部使用在

worker

外部声明的方法/函数。因此，例如，如果您在昂贵的过程中使用库的方法，那么您不能使用此方法

如果情况并非如此，那么您可以：

• 官方文件（非常基本和简短）：
• 非常有用的教程（更多扩展）：

更新：链接无效时包含的代码。这是一个简单的例子

创建名为

foo.worker.ts的文件

addEventListener（'message'，（{data}）=>{
//做点什么
const response='这是作业结果'；
//此内部方法“postMessage”用于返回结果
后消息（响应）；
});

使用其他文件中的辅助程序：

const-worker=new-worker（'./foo.worker'，{type:'module'}）；
worker.onmessage=（{data}）=>{
//这将在工作人员完成并完成时执行
//调用“postMessage”。
//“data”对象是从辅助对象返回的结果。
};
//这就是您所称的启动工作进程。
//作为参数，您将发送工作人员需要的信息
//完成它的工作（在本例中为“hello”）。
worker.postMessage（'hello'）；
}否则{
//此环境中不支持Web工作人员。
//您应该添加回退，以便您的程序仍能正确执行。
}

浏览器中只有一个javascript代码线程。你不能在服务器上执行代码吗？在网络上运行昂贵的任务worker@mh-戴夫：谢谢你的好消息。我可以考虑在服务器上运行它。我正在开发的应用程序是一个两人游戏，其中一人可以是电脑。不太理想，但我不在乎当机器开始移动时UI是否冻结2-3秒，只要动画运行平稳并显示人的移动。也许有办法知道动画什么时候完成？@GünterZöchbauer:谢谢。关于如何开始使用Angular 2中的web workers，有什么建议吗？我确实看到Angular 2有一个

WebWorkerInstance

类，我也看到过类似这样的包。但我不清楚如何使用它们。到目前为止，我只是用Dart试过。我想您需要从源代码构建Angular以获得完全生成的示例。一旦你知道它是如何工作的，它就相当直接了。虽然这个链接可以回答这个问题，但最好在这里包括答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能无效。-@mhdalaalhaj你完全正确。我只是添加了一些注释来解释代码。谢谢你的评论，非常欢迎！