首页 文章

在webworker中运行角度应用程序逻辑时拖放实现

提问于
浏览 次
1

基于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!');" 也是如此 .

Now my question ：有谁知道，我怎么能添加一个 dragstart 监听器？或者 - 如果是这样 - 为什么这样做/不能起作用？

我的目标是基于两个简单的指令实现精简拖放功能，而无需任何库 .

为了好奇，我尝试了ng2-dnd和ng-drag-drop . 然而，两者都在网络工作者中失败了 .

angular drag-and-drop web-worker

2 回答

  • 0

    WebWorkers在UI的单独线程上运行，并且无权访问DOM .

    因此，它们并不打算像从DOM接收事件那样做 .

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

    前台代码应该接收来自worker的响应，然后对DOM进行任何更新 .

    回复于
  • 0

    在经过测试和尝试之后我很确定拖拽事件根本无法按照上述方式工作（至少在这个时间点） .
    其他库（ngx-drag-drop，dragular）在此项目设置中不起作用的事实也加强了我的假设 . 我没有找到任何解释为什么这些事件在其他人做的同时不起作用 .

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

    无论如何 - 在玩我的应用程序时，我发现了在Web工作者中使用整个应用程序的几个缺点：

    • 拖放不起作用

    • Angular Material组件框架doesn’t work也是如此

    • 所有组件和服务都在同一个Web worker中运行，并且可能会相互阻塞

    因此，我尝试了另一种方法将我的大量后台任务转移到Web worker：webpack . 使用webpack，我能够将有关的TypeScript文件捆绑到一个JavaScript文件中 . TypeScript文件驻留在我的Angular项目中，工作包被创建到我的assets文件夹中 . 这样我就可以在UI和工作线程上重用相同的类 .

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

    围绕Web worker主题的一些有趣链接：

    回复于

相关问题