Angular2:使用表格行上的指令拖动事件工作非常慢

Question

我在指令的帮助下实现了拖放功能。

@Directive({
selector: '[Droppable]',
host:{
    '(dragenter)':'onDragEnter($event)',
    '(dragover)':'onDragOver($event)',
    '(dragleave)':'onDragLeave($event)',
    '(drop)':'onDrop($event)'
}
})
export class DragDropDirective {
@Input('Droppable') isDropable:boolean;
@Input() set doBoarderHighLight(decision:boolean) {
    this._doBoarderHighLight = decision;
    this._doBackgroundHighLight = !decision;
}
@Input() doBackgroundHighLight(decision:boolean) {
    this._doBackgroundHighLight = decision;
    this._doBoarderHighLight = !decision;
}
@Output() OnDrop = new EventEmitter(false);
_doBoarderHighLight:boolean = false;
_doBackgroundHighLight:boolean = true;
_isDropable:boolean = true;
el:ElementRef;
constructor(public _el:ElementRef) {
    this.el = _el;
}
onDragOver(e:any) {
    e.preventDefault();
}
onDragEnter(e:any) {
    e.preventDefault();
    e.stopPropagation();
    if (this._doBoarderHighLight) {
        this.el.nativeElement.addClass("drag-over");
        this.el.nativeElement.addClass("highlight-border");
    }
    else {
        this.el.nativeElement.addClass("drag-over");
        this.el.nativeElement.addClass("highlight-background");
    }
}
onDragLeave(e:any) {
    e.preventDefault();
    e.stopPropagation();
    if (this._doBoarderHighLight) {
        this.el.nativeElement.removeClass("drag-over");
        this.el.nativeElement.removeClass("highlight-border");
    }
    else {
        this.el.nativeElement.removeClass("drag-over");
        this.el.nativeElement.removeClass("highlight-background");
    }
}
onDrop(e:any) {
    e.preventDefault();
    e.stopPropagation();
    Utils.nextEventIfExist(e, this.OnDrop);
    if (this._doBoarderHighLight) {
        this.el.nativeElement.removeClass("drag-over");
        this.el.nativeElement.removeClass("highlight-border");
    }
    else {
        this.el.nativeElement.removeClass("drag-over");
        this.el.nativeElement.removeClass("highlight-background");
    }
}
}

我在表行上使用指令，

<tbody *ngFor="let row of rows;#i = index">      
<tr [Droppable]="isDropableRow"   (OnDrop)="OnDropRow($event)" [ngClass]="{'row-data':true,'active':row.isSelected,'disabled-row':!isEnabled(row)}" (click)="onRowClick($event,row)">

问题是，拖动事件的触发速度非常慢，如您所见，我已经添加和删除了类以突出显示 dragEnter 和 DragLeave 上的行。

我得到的是，缓慢来自angular2的zone js，可能是我的代码中的问题或角度中的问题。

Answer 1

我认为这是由 https://github.com/angular/angular/issues/6311 引起的

已经有一个公关 https://github.com/angular/angular/pull/8761