Angular 2拖放指令非常慢

Question

我正在尝试实现自定义的拖放指令。它可以工作，但是速度非常慢，我认为可以将这种速度跟踪到Angular 2，因为我以前从未遇到过这种速度。仅当我将事件侦听器附加到dragover或drag事件（即频繁发送的事件）时，即使我什么也不做，但在其中返回false的情况下，也只会出现慢速情况。

这是我的指令代码：

import {Directive, ElementRef, Inject, Injectable} from 'angular2/core';

declare var jQuery: any;
declare var document: any;

@Directive({
    selector: '.my-log',
    host: {
        '(dragstart)': 'onDragStart($event)',
        '(dragover)': 'onDragOver($event)',
        '(dragleave)': 'onDragLeave($event)',
        '(dragenter)': 'onDragEnter($event)',
        '(drop)': 'onDrop($event)',
    }
})
@Injectable()
export class DraggableDirective {
    refcount = 0;
    jel;

    constructor( @Inject(ElementRef) private el: ElementRef) {
        el.nativeElement.setAttribute('draggable', 'true');
        this.jel = jQuery(el.nativeElement);
    }

    onDragStart(ev) {
        ev.dataTransfer.setData('Text', ev.target.id);
    }

    onDragOver(ev) {
        return false;
    }

    onDragEnter(ev) {
        if (this.refcount === 0) {
            this.jel.addClass('my-dragging-over');
        }
        this.refcount++;
    }

    onDragLeave(ev) {
        this.refcount--;
        if (this.refcount === 0) {
            this.jel.removeClass('my-dragging-over');
        }
    }

    onDrop(ev) {
        this.jel.removeClass('my-dragging-over');
        this.refcount = 0;
    }
}
这是相关的样式表摘录：

.my-log.my-dragging-over {
    background-color: yellow;
}
您可以看到我正在做的是以黄色突出显示要拖动的元素。当我不处理dragover事件时，它可以快速运行，但是我必须

处理它以支持删除。当我确实处理dragover事件时，一切都会减慢到难以忍受的水平！

EDIT

我正在使用角度beta 2.0.0-beta.8

EDIT＃2

我尝试使用chrome的探查器对代码进行性能分析，结果如下：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLmltZ3VyLmNvbS9qZDYzcGxkLnBuZyJ9” alt =“ Imgur”>

看看标记的行，这真是可疑...

EDIT＃3

发现了问题：确实是由于Angular 2的更改检测。在我的情况下，拖放操作是在一个非常密集的页面上完成的，其中包含许多绑定和指令。当我注释掉除给定列表之外的所有内容时，它再次运行很快...现在，需要您的帮助才能找到解决方案！

已解决编辑＃4

问题的确是变更检测，但问题不在于Angular的代码，而是我自己的低效绑定。我有很多这样的绑定：

*ngFor="#a of someFunc()"
这使Angular不确定数据是否已更改，即使在拖放过程中数据没有更改，函数someFunc也一次又一次地被调用。我将这些绑定更改为引用类中的简单属性，然后将填充它们的代码移到了应有的位置。一切再次开始快速移动闪电！

谢谢！

我正在尝试实现自定义的拖放指令。它可以工作，但是速度非常慢，我认为可以将这种速度跟踪到Angular 2，因为我以前从未遇到过这种速度。 ...

Answer 1

只是遇到了同样的问题。即使使用高效的ngFor代码，如果您有大量可拖动项，拖放操作仍然会非常缓慢。

Answer 2

感谢大家的讨论。最后得到一个简单的解决方案，就像一个魅力：

Answer 3

回答我自己的问题（问题已解决。）>

速度慢的问题是由于我的标记中的数据绑定效率低下，这导致Angular浪费了很多时间在我的视图模型上调用函数。我有很多这样的绑定：

Answer 4

最近我有一个类似的问题。它处于使用反应形式的6号角环境中。这是我针对自己的情况解决的方法：

Answer 5

我有一个类似的问题，当我确实在*ngFor中放置了多个拖动区域时，拖放变得非常缓慢。

Answer 6

对我来说，即使在生产中也已打开开发模式。当我用ng build --evn-prod进行编译时，拖放突然变得非常快。

Answer 7

我在角度项目中拖放时遇到了相同的问题-detectChanges（reattach（），deTached ..），outSide Angular（ngZone）无法解决此问题。现在，我通过使用jquery解决了这个问题，我将构造函数绑定到div内容中。