Angular2: перетаскивание событий с использованием директив в таблице работает очень медленно

Question

Я реализую функциональность dragdrop с помощью директив.

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

То, что я получил, заключается в том, что медлительность происходит из зоны js angular2, может быть проблема в моем коде или проблема в angular.

Answer 1

Я думаю, что это вызвано https://github.com/angular/angular/issues/6311

Уже есть пиар https://github.com/angular/angular/pull/8761