Estamos implementando a funcionalidade de arrastar e soltar com o Angular 2.

Estou usando odragover evento apenas para executar opreventDefault() função. Para que odrop evento funciona como explicado emessa questão.

odragover O método está sendo tratado peloonDragOver função no componente.

<div draggable="true"
    (dragover)="onDragOver($event)">
...

No componente, essa função evita o comportamento padrão, permitindo que o item arrastado seja solto nesse destino.

onDragOver(event) {
    event.preventDefault();
}

Isso funciona como esperado. O evento dragover é disparado a cada algumas centenas de milissegundos.

Mas, toda vez que oonDragOver é chamada, Angular 2 executa seu ciclo de digestão. Isso diminui a velocidade do aplicativo. Eu gostaria de executar esta função sem acionar o ciclo de digestão.

Uma solução alternativa que usamos para isso é assinar o evento do elemento e executá-lo fora do contexto do Angular 2 da seguinte maneira:

constructor( ele: ElementRef, private ngZone: NgZone ) {
    this.ngZone.runOutsideAngular( () => {
        Observable.fromEvent(ele.nativeElement, "dragover")
            .subscribe( (event: Event) => {
                event.preventDefault();
            }
        );
    });
}

Isso funciona bem. Mas existe uma maneira de conseguir isso sem precisar acessar diretamente o nativeElement?