我试图阅读很多关于NgZone
角度的内容。我知道角度zone.js
用于变化检测。我看到一些代码使用了 zone.run 并在其中放置了一些操作。
它实际上是做什么的?
我仍然无法弄清楚实际使用zone.run
this.zone.run(() => {
/* my code here */
});
在这个链接的帮助下,我明白了一点。
我试图阅读很多关于NgZone
角度的内容。我知道角度zone.js
用于变化检测。我看到一些代码使用了 zone.run 并在其中放置了一些操作。
它实际上是做什么的?
我仍然无法弄清楚实际使用zone.run
this.zone.run(() => {
/* my code here */
});
在这个链接的帮助下,我明白了一点。
答案本身已在您提到的博客中提供。我会尝试进一步分解它。在给定的示例中:
情况:您正在创建一个
progress-bar
组件,其值将每 10 毫秒更新一次
NgZone
:一旦button
被点击,increaseProgress()
将被调用一个函数(进度条完成后将显示其值)
<button (click)="processWithinAngularZone()">
Process within Angular zone
</button>
它每 10 毫秒调用一次,并不断增加this.progress
计数器,直到100
increaseProgress(doneCallback: () => void) {
this.progress += 1;
console.log(`Current progress: ${this.progress}%`);
if (this.progress < 100) {
window.setTimeout(() => {
this.increaseProgress(doneCallback);
}, 10);
} else {
doneCallback();
}
}
这将起作用,但是由于我们正在使用setTimeout
,因此ChangeDetection
每次都会触发循环10 milliseconds
,这将影响应用程序的性能
NgZone
:与ngZone
我们一起传递,zone.run()
而不是console.log
。ChangeDetection
一旦计数器完成,这基本上将作为触发器。
现在,为了避免(由于猴子补丁而触发)的影响setTimeout
ChangeDetection
,我们将整个执行块包装在里面this.zone.runOutsideAngular
。ChangeDetection
仅在我们显式调用 时才会调用zone.run()
。
this.zone.runOutsideAngular(() => {
this.increaseProgress(() => {
this.zone.run(() => {
console.log('Outside Done!');
});
});
});
类似的用例:
假设您需要实现一些逻辑,scrollEvent
这些逻辑可能会触发一个可能导致触发ChangeDetection
. 为避免这种情况,我们可以使用zone.runOutsideAngular
并手动触发ChangeDetection
特定动作/持续时间后使用zone.run()
.
您正在使用一些 3rd 方库(在 Angular 之外工作ChangeDetection
)并且您需要CD
在该 3rd 方库的某些事件之后手动触发。
使用它不是很频繁,但是是的,它会在不知道的情况下产生不需要的行为。
我希望它可以帮助您更好地理解这个概念