英文:
Why ngDoCheck is called when setTimeout is resolved?
问题
我试图理解为什么在 setTimeout 解析时会运行 ngDoCheck。
我有一个简单的组件如下：
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css'],
})
export class ChildComponent implements DoCheck {
constructor(private cd: ChangeDetectorRef) {
setTimeout(() => {
console.log('setTimeout done');
// DoCheck runs
}, 5000);
}
ngDoCheck(): void {
console.log('Child DoCheck: ');
}
}
5秒后，我得到如下日志：
setTimeout done
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.
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css'],
})
export class ChildComponent implements DoCheck {
constructor(private cd: ChangeDetectorRef) {
setTimeout(() => {
console.log('setTimeout done');
// DoCheck runs
}, 5000);
}
ngDoCheck(): void {
console.log('Child DoCheck: ');
}
}
after 5 secs, I get logs like:
setTimeout done
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：
Zone.__load_patch('timers', (global: any) => {
const set = 'set';
const clear = 'clear';
patchTimer(global, set, clear, 'Timeout');
patchTimer(global, set, clear, 'Interval');
patchTimer(global, set, clear, 'Immediate');
});
英文:
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
Zone.__load_patch('timers', (global: any) => {
const set = 'set';
const clear = 'clear';
patchTimer(global, set, clear, 'Timeout');
patchTimer(global, set, clear, 'Interval');
patchTimer(global, set, clear, 'Immediate');
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论