drag-and-drop - 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 事件时，一切都变慢到无法忍受的程度!!

编辑 我使用的是 angular beta 2.0.0-beta.8

编辑 #2 我尝试使用 chrome 的分析器分析代码，结果如下:

看标记线，奇怪的是可疑...

EDIT #3 发现了问题:这确实是由于 Angular 2 的变更检测。在我的案例中，拖放操作是在一个包含大量绑定(bind)和指令的非常密集的页面上完成的。当我注释掉给定列表以外的所有内容时，它再次快速运行......现在我需要你的帮助来找到解决这个问题的方法!

Answer 1

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

对我来说，诀窍是让所有拖放事件监听器在 Angular 之外运行 ngZone，然后在拖放时让它在 Angular 中运行。这使得 Angular 避免检查您移动可拖动项目的每个像素的检测。

注入(inject):

import { Directive, ElementRef, NgZone } from '@angular/core';
constructor(private el: ElementRef, private ngZone: NgZone) {}

初始化:

ngOnInit() {
  this.ngZone.runOutsideAngular(() => {
    el.addEventListener('dragenter', (e) => {
      // do stuff with e or el
    });
...

掉落时:

el.addEventListener('drop', (e) => {
    this.ngZone.run(() => {
        console.log("dropped");
    })
})