相关疑难解决方法(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
查看次数

this._ngZone.onMicrotaskEmpty.first() - 代码说明

差不多2个月前有人帮我解决了异步问题,它工作得非常好(我已经添加了分配给它),但我的程序中仍然有这个代码,我不完全确定它的作用.

原始代码是:

constructor(private ngZone: NgZone) { }

ngOnInit() { 
   this.getPosts()
     .subscribe(x => { 
        this.apidata = x;
        this.ngZone.onMicrotaskEmpty.first().subscribe(() => {
          this.largestHeight(); 
        });
      });
}
Run Code Online (Sandbox Code Playgroud)

现在很难获得关于这方面的文档,而且我已经在过去的两个月内尝试过.他们只是给出了一个定义,但不是真实的例子.实际的路线是this.ngZone.onMicrotaskEmpty.first().subscribe(()

1)因此ngZone基本上可以访问您正忙着的区域,我理解这70%

2)onMicrotaskEmpty "当前VM Turn中没有更多的微任务队列时通知".

  • a)首先,VM代表"虚拟机"吗?很难得到这个的定义.
  • b)当整个应用程序的微任务队列为空时,或仅仅是组件时,它会通知吗?如果它是整个应用程序,我也将此代码放在另一个组件中,当队列为空时,哪一个会先运行?
  • c)它说它暗示Angular运行变化检测.那么"提示"是什么意思呢?Angular何时运行变更检测,什么时候不进行检测?
  • d)如果我用onStable改变onMicrotaskEmpty,代码仍然运行正常.它们基本上是一回事吗?(它们都在所有微任务完成时运行)

3)first()我得到的这个方法的唯一解释来自w3school:"first()方法返回所选元素的第一个元素." 所以我不明白的是在上面的代码中,我选择了哪些元素.我尝试在这上面运行一个console.dir和.log,但我得到的只是[object Object].所以我想知道第一个什么元素?

4)subscribe()我真的不知道为什么这里有订阅.我的印象是你只能订阅observable的/ promises.你可以订阅任何可以改变的东西,然后在它发生变化时运行订阅代码块吗?如果是这样,以前的方法是什么改变触发订阅运行的方法?

我希望似乎我已经尝试并寻找上述答案,但似乎所有内容都是为那些不需要首先阅读它的人写的......:P

angular

13
推荐指数
1
解决办法
1023
查看次数

标签 统计

angular ×2

event-handling ×1

mouseevent ×1