基于Angular CLI 1.7.4（Ubuntu 17.10），我用
创建了一个小样本应用程序ng new webWorkerTest
并按照本指南中的步骤进行操作：Angular with Web Workers: Step by step。之后我创建了一个组件DraggableComponent：
ng g c draggable
并尝试通过添加
将 dragstart 侦听器注册到该组件this.renderer.listen(this.reference.nativeElement, 'dragstart', (event: Event) => {
console.log('Element drag start');
});
到这个组件的构造函数（实际上我尝试了很多，但这是我最好的猜测;））。
不幸的是，这不起作用。它适用于click或mousemove事件，但不适用于dragstart。令人惊讶的是，模板中onDragStart="alert('This one works!');"也起作用。
现在我的问题：有谁知道，如何添加dragstart监听器？或者 - 如果是这样 - 为什么这样做/不能起作用？
我的目标是基于两个简单的指令实现精简拖放功能，而不需要任何库。
为了好奇，我尝试了ng2-dnd和ng-drag-drop。但是，两者都失败了。
答案 0 :(得分：0)
WebWorkers在与UI无关的单独线程上运行，并且无法访问DOM。
因此，他们并不打算做一些事情，比如从DOM接收事件。
相反，您应该在UI线程（而不是WebWorker）上接收事件（例如＆＃39; dragstart＆＃39;），并让该前台事件处理程序启动WebWorker。
前台代码应该接收来自worker的响应，然后对DOM进行任何更新。
答案 1 :(得分：0)
经过测试和尝试后，我很确定拖拽事件根本无法按照上述方式工作（至少在这个时间点）。
其他图书馆（ngx-drag-drop，dragular）在这个项目设置中不起作用的事实也加强了我的假设。我没有找到任何解释为什么这些事件在其他事件发生的同时不起作用。
单击事件和鼠标事件工作得非常好，我能够根据鼠标事件构建自己的拖放（虽然有一些怪癖）。
无论如何 - 在玩我的应用程序时，我发现了在网络工作者中使用整个应用程序的几个缺点：
因此，我尝试了另一种方法将我的大量后台任务转移到网络工作者：webpack。使用webpack，我能够将有关的TypeScript文件捆绑到一个JavaScript文件中。 TypeScript文件驻留在我的Angular项目中，工作包被创建到我的assets文件夹中。这样我就可以在UI和工作线程上重用相同的类。
所以从这个想法开始，我就能解决上面提到的所有问题。我的拖放implementation在UI线程上运行。包含Angular Material是没有问题的，并且可以在WebWorker中执行广泛的后台任务。 UI和WebWorker之间的通信基于postMessage()命令。就是这样。
围绕网络工作者主题的一些有趣链接：