onDragOver 非常慢 Angular Material 选项卡

Question

我正在使用 Angular 6 和 Angular Material。我正在尝试在 Material 选项卡 () 内实现一个简单的拖放列表。拖放在 material 选项卡外工作正常，但在选项卡内它非常慢（18 秒到 5 项列表中的 DnD 1 项）。即使鼠标没有移动，onDragEvent 也会触发很多次。我试过分离 (onDragStart) 并重新连接 (onDrop) 变化检测器。没什么区别。

这是html：

<div (dragover)="onDragOver($event)">
    <div *ngFor="let item of listItems, let i = index"
         (drop)="onDrop($event, i)"
         [draggable]="true"
         (dragstart)="onDragStart(i)">
        {{item}}
    </div>
</div>

函数如下：

onDragStart(i) {
}


onDragOver(event) {
    console.log('1')
    event.preventDefault();
}

onDrop(event, i) {
}

谢谢。

Answer 1

我遇到了类似的问题，当页面上有很多元素时拖动速度非常慢。我发现删除 (dragover) angular 绑定，并用纯 javascript 替换它立即解决了问题

我换了

(dragover)="this.onDragOver($event)"

至

ondragover="onDragOver(event)"

您还需要在 index.html 中声明该函数，而不是在您的打字稿文件或 html 模板中（因此是纯 javascript）

Answer 2

似乎当我在屏幕上拖动项目时 - 即使是短暂的，Angular 引擎也过度燃烧并排队等待大量的 onDrop and/or onDragEnter 调用。当 angular 挂钩这些事件时，它还假设 angular 组件中的某些内容发生了变化，并通过变化检测例程运行。

每次……每次。

我解决问题的方法是在拖动开始时关闭变化检测，并在拖动完成后重新打开它。

以下是我所做的简要提示：

进口ChangeDetectorRef from '@angular/core'
将 ChangeDetector 注入您的构造函数： constructor(private cdr: ChangeDetectorRef)
从 dragStart 调用分离： this.cdr.detach();
从 drop 和 dragEnd 调用 reattach： this.cdr.reattach();

如果您的组件深埋在页面中，您可能必须在更高级别分离更改检测才能看到结果。

onDragOver 非常慢 Angular Material 选项卡

onDragOver very slow with Angular Material tabs

drag-and-drop

angular-material

angular6