Question

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

这是html：

<table class="my_table" border>
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>Celphone</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="contact in contacts" tabindex="0">
      <td>{{contact.Name}}</td>
      <td>{{contact.Address}}</td>
      <td>{{contact.Celphone}}</td>
    </tr>
  </tbody>
</table>

以下是功能：

<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>

谢谢。

Answer 1

我处于类似的位置，经过无奈后，我找到了解决方案。看来，当我在屏幕上拖动项目时，甚至是短暂地拖动时，Angular引擎都过火并排队了对onDrop和/或onDragEnter的大量调用。并且，当角度钩住了这些事件时，它还假定角度分量中的某些内容已更改，并且它会通过更改检测例程运行。

每次...时间。

我这样做固定我的问题是关闭变化检测拖动开始时，并重新打开它时，拖动完成什么。

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

从“ @ angular / core”导入ChangeDetectorRef
注入ChangeDetector到您的构造函数：构造函数（私有cdr：ChangeDetectorRef）
从dragStart调用detach： this.chngDetRef.detach（）;
通过拖放拖拽重新附加： this.chngDetRef.reattach（）;

如果您的组件深藏在页面的深处，则可能必须在更高级别上分离变更检测才能查看结果。

祝你好运！

Answer 2

我遇到了类似的问题，当页面上有许多元素时拖动是无法忍受的慢。我发现删除（dragover）角度绑定，并用纯javascript替换它立即解决了问题

我换了

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

到

ondragover="onDragOver(event)"

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

使用Angular Material选项卡时，onDragOver非常慢

2 个答案: