相关疑难解决方法(0)

Angular 2如何防止事件触发摘要循环/检测周期?

我们正在使用Angular 2实现拖放功能.

我正在使用该dragover事件来运行该preventDefault()功能.这样的drop事件就像这个问题中解释的那样.

dragover方法由onDragOver组件中的函数处理.

<div draggable="true"
    (dragover)="onDragOver($event)">
...
Run Code Online (Sandbox Code Playgroud)

在组件中,此功能可防止默认行为,允许将拖动的项目放在此目标上.

onDragOver(event) {
    event.preventDefault();
}
Run Code Online (Sandbox Code Playgroud)

这按预期工作.每隔几百毫秒就会触发一次dragover事件.

但是,每次onDragOver调用该函数时,Angular 2都会运行其摘要周期.这会降低应用程序的速度.我想在不触发摘要周期的情况下运行此功能.

我们使用的解决方法是订阅元素事件并在Angular 2的上下文之外运行它,如下所示:

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

这很好用.但有没有办法实现这一点,而无需直接访问nativeElement?

event-handling mouseevent angular

15
推荐指数
2
解决办法
5616
查看次数

标签 统计

angular ×1

event-handling ×1

mouseevent ×1