drag-and-drop - 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のゾーンjsによるものであり、コードの問題か角度の問題である可能性があるということです。