为什么在 setTimeout 解析时会调用 ngDoCheck?

huangapple go评论98阅读模式
英文:

Why ngDoCheck is called when setTimeout is resolved?

问题

我试图理解为什么在 setTimeout 解析时会运行 ngDoCheck。

我有一个简单的组件如下:

  1. @Component({
  2. selector: 'app-child',
  3. templateUrl: './child.component.html',
  4. styleUrls: ['./child.component.css'],
  5. })
  6. export class ChildComponent implements DoCheck {
  7. constructor(private cd: ChangeDetectorRef) {
  8. setTimeout(() => {
  9. console.log('setTimeout done');
  10. // DoCheck runs
  11. }, 5000);
  12. }
  13. ngDoCheck(): void {
  14. console.log('Child DoCheck: ');
  15. }
  16. }

5秒后,我得到如下日志:

  1. setTimeout done
  2. Child DoCheck:

为什么调用了 ngDoCheck?即使没有更新任何状态/模型/绑定。

我大致了解 ngDoCheck 被调用的概念:

  • 每当 Angular 变更检测运行时
  • 用于捕获 Angular 本来不会捕获的变更。

是否存在某种承诺绑定,带有 zone.js 的 setTimeout,当调用解析时会调用 ngDoCheck?

如果是这样,我想看到 zone.js 代码或任何来自文档的实际源代码来确认这一点。

此外,在仅仅在 setTimeout 中记录控制台时,调用 ngDoCheck 有什么目的?我的意思是这种用例的应用场景是什么。

英文:

I'm trying to understand why ngDoCheck runs when setTimeout is resolved.

I've a simple component like this.

  1. @Component({
  2. selector: 'app-child',
  3. templateUrl: './child.component.html',
  4. styleUrls: ['./child.component.css'],
  5. })
  6. export class ChildComponent implements DoCheck {
  7. constructor(private cd: ChangeDetectorRef) {
  8. setTimeout(() => {
  9. console.log('setTimeout done');
  10. // DoCheck runs
  11. }, 5000);
  12. }
  13. ngDoCheck(): void {
  14. console.log('Child DoCheck: ');
  15. }
  16. }

after 5 secs, I get logs like:

  1. setTimeout done
  2. Child DoCheck:

Why ngDoCheck was called? even though no state/model/binding was updated

I get the general concept when ngDoCheck is called:

  • whenever angular change detection runs
  • to capture changes that angular otherwise doesn't.

Is there some sort of binding of promises, setTimeout with zone js that calls ngDoCheck whenever the call is resolved?

If so, I want to see zonejs code or any actual source from docs that confirms it.

Also, what is the purpose of calling ngDoCheck when simply console logging a setTimeout? I mean this use case application.

答案1

得分: 3

如在angular 文档中提到:

Zone.js是Angular用于检测应用程序状态可能已更改的信号机制。它捕获像setTimeout、网络请求和事件监听器等异步操作。Angular根据Zone.js的信号安排变更检测。

以下是来自angular存储库的代码,演示了如何monkey patch setTimeout

  1. Zone.__load_patch('timers', (global: any) => {
  2. const set = 'set';
  3. const clear = 'clear';
  4. patchTimer(global, set, clear, 'Timeout');
  5. patchTimer(global, set, clear, 'Interval');
  6. patchTimer(global, set, clear, 'Immediate');
  7. });

patchTime的源代码

英文:

As mentioned in angular documentation:

> Zone.js is a signaling mechanism that Angular uses to detect when an
> application state might have changed. It captures asynchronous
> operations like setTimeout, network requests, and event listeners.
> Angular schedules change detection based on signals from Zone.js

Here is the code from angular repo how it monkey patches setTimeout

  1. Zone.__load_patch('timers', (global: any) => {
  2. const set = 'set';
  3. const clear = 'clear';
  4. patchTimer(global, set, clear, 'Timeout');
  5. patchTimer(global, set, clear, 'Interval');
  6. patchTimer(global, set, clear, 'Immediate');
  7. });

Source code for patchTime

huangapple
  • 本文由 发表于 2023年7月6日 13:49:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/76625852.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定