在 webworker 中运行 Angular 应用程序逻辑时拖放实现答案

【问题标题】：Drag and drop implementation while running angular app logic in a webworker在 webworker 中运行 Angular 应用程序逻辑时拖放实现
【发布时间】：2018-09-25 11:29:54
【问题描述】：

基于 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。但是，两者都在 webworker 中失败了。

【问题讨论】：

嘿伙计，我建议将标题/问题更改为“在 webworker 中运行 Angular 应用程序逻辑时实现拖放 API”。这个话题确实很有趣，但你当前的问题有点误导。

标签： angular drag-and-drop web-worker

【解决方案1】：

WebWorkers 在与 UI 不同的线程上运行，并且无权访问 DOM。

因此，它们不打算做诸如从 DOM 接收事件之类的事情。

相反，您应该在 UI 线程（而不是在 WebWorker 中）接收事件（例如“dragstart”），并让前台事件处理程序启动 WebWorker。

前台代码应该收到工作人员的响应，然后对 DOM 进行任何更新。

【讨论】：

感谢您的回复，GreyBeardedGeek - 我读了 100 遍。但是，您似乎只阅读了我问题的 50% ;) 因为其他事件可以正常工作，没有任何问题。为什么click、mousemove、mousedown 与dragstart 不能同时工作。特别是，因为拖动与鼠标事件有些相关。此外，Renderer2 API 看起来像是为这种访问而设计的。

【解决方案2】：

在测试和尝试了很多之后，我很确定拖动事件根本不会像上面描述的那样工作（至少目前是这样）。
其他库（ngx-drag-drop、dragular）在此项目设置中不起作用的事实也加强了我的假设。我没有找到任何解释为什么这些事件不能同时其他事件起作用。

单击事件和鼠标事件工作得很好，我能够根据鼠标事件构建自己的拖放（虽然有一些怪癖）。

无论如何——在玩弄我的应用程序时，我发现了将整个应用程序放在 Web Worker 中的几个缺点：

拖放不起作用
Angular Material 组件框架doesn’t work 也是如此
所有组件和服务都在同一个 Web Worker 中运行，并且可能会相互阻塞

因此，我尝试了另一种方法将我的大量后台任务转移到网络工作者中：webpack。使用 webpack，我能够将相关的 TypeScript 文件捆绑到一个 JavaScript 文件中。 TypeScript 文件位于我的 Angular 项目中，并且工作包被创建到我的资产文件夹中。这样我就可以在 UI 和工作线程上重用相同的类。

所以从这个想法开始，我能够解决上面提到的所有问题。我的拖放 implementation 在 UI 线程上运行。包含 Angular Material 没有问题，并且可以在 WebWorker 中执行广泛的后台任务。 UI 和 WebWorker 之间的通信基于postMessage() 命令。就是这样。

围绕网络工作者主题的一些有趣链接：

Angular with Web Workers: Step by Step：将完整的应用包装到 WebWorker 中。
angular2-web-worker 或 angular2-web-worker：在 WebWorker 中运行方法
Intro to Angular 2 – Part 5 – WebWorkers：初始化一个 WebWorker 并向其发送消息
Second argument of postMessage is not a transfert list：从 WebWorker 解决与 postMessage() 相关的问题

【讨论】：