在网络工作者中 运行 angular 应用程序逻辑中拖放实现
Drag and drop implementation while running angular app logic in a webworker
基于 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 侦听器吗？或者 - 如果是这样 - 为什么这个 does/cannnot 不起作用？
我的目标是在没有任何库的情况下基于两个简单的指令实现精简的拖放功能。
出于好奇，我尝试了 ng2-dnd and ng-drag-drop。但是，两者在网络工作者中也都失败了。
WebWorkers 运行 在与 UI 不同的线程上，并且无法访问 DOM。
因此，他们不打算做诸如从 DOM 接收事件之类的事情。
相反，您应该在 UI 线程（而不是在 WebWorker 中）接收事件（例如 'dragstart'），并让该前台事件处理程序启动 WebWorker。
前台代码应该收到worker的响应，然后对DOM进行任何更新。
经过大量测试和尝试后，我相当确定拖动事件根本不会以上述方式工作（至少在这个时间点）。
其他库 (ngx-drag-drop, dragular) 在此项目设置中不起作用的事实也加强了我的假设。我没有找到任何解释为什么这些事件不能同时发生。
点击事件和鼠标事件工作得很好，我能够基于鼠标事件构建我自己的拖放（虽然有一些怪癖）。
无论如何——在试用我的应用程序时，我发现了将整个应用程序放在网络工作者中的几个缺点：
- 拖放无效
- 还有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 or angular2-web-worker: 运行 WebWorker 中的一个方法
- Intro to Angular 2 – Part 5 – WebWorkers: 初始化一个WebWorker并post向它发送消息
- Second argument of postMessage is not a transfert list：从 WebWorker
解决与 postMessage() 相关的问题
基于 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 侦听器吗？或者 - 如果是这样 - 为什么这个 does/cannnot 不起作用？
我的目标是在没有任何库的情况下基于两个简单的指令实现精简的拖放功能。
出于好奇，我尝试了 ng2-dnd and ng-drag-drop。但是，两者在网络工作者中也都失败了。
WebWorkers 运行 在与 UI 不同的线程上，并且无法访问 DOM。
因此，他们不打算做诸如从 DOM 接收事件之类的事情。
相反，您应该在 UI 线程（而不是在 WebWorker 中）接收事件（例如 'dragstart'），并让该前台事件处理程序启动 WebWorker。
前台代码应该收到worker的响应，然后对DOM进行任何更新。
经过大量测试和尝试后，我相当确定拖动事件根本不会以上述方式工作（至少在这个时间点）。
其他库 (ngx-drag-drop, dragular) 在此项目设置中不起作用的事实也加强了我的假设。我没有找到任何解释为什么这些事件不能同时发生。
点击事件和鼠标事件工作得很好，我能够基于鼠标事件构建我自己的拖放（虽然有一些怪癖）。
无论如何——在试用我的应用程序时，我发现了将整个应用程序放在网络工作者中的几个缺点：
- 拖放无效
- 还有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 or angular2-web-worker: 运行 WebWorker 中的一个方法
- Intro to Angular 2 – Part 5 – WebWorkers: 初始化一个WebWorker并post向它发送消息
- Second argument of postMessage is not a transfert list：从 WebWorker 解决与
postMessage() 相关的问题