Estamos implementando la funcionalidad de arrastrar y soltar con Angular 2.

Estoy usando eldragover evento solo para ejecutar elpreventDefault() función. De manera que ladrop el evento funciona como se explica enesta pregunta.

losdragover el método está siendo manejado por elonDragOver funcionar en el componente.

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

En el componente, esta función evita el comportamiento predeterminado permitiendo que el elemento arrastrado se suelte en este objetivo.

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

Esto funciona como se esperaba. El evento de dragover se dispara cada pocos cientos de milisegundos.

Pero, cada vez que elonDragOver Se llama a la función, Angular 2 ejecuta su ciclo de digestión. Esto ralentiza la aplicación. Me gustaría ejecutar esta función sin activar el ciclo de resumen.

Una solución alternativa que usamos para esto es suscribirse al evento de elemento y ejecutarlo fuera del contexto de Angular 2 de la siguiente manera:

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

Esto funciona bien Pero, ¿hay alguna manera de lograr esto sin tener que acceder directamente al nativeElement?