fixture.detectChange如何通过Angular zone执行其异步逻辑的

简介: fixture.detectChange如何通过Angular zone执行其异步逻辑的

调试出发点:


image.png


在detectChange内部本身有一个ngZone:


image.pngimage.png




接下来会在this.ngZone里执行箭头函数的逻辑,即this._tick():



image.png

this.ngZone.run里面调用_inner的run方法:


image.png


this._zoneDelegate.invoke:


image.png


ZoneDelegate.invoke方法内部, 调用this._invokeZS.onInvoke:



image.png

onInvoke:首先onEnter进入Zone:


image.png


onEnter方法,修改zone._nesting的层数:



image.png



parentZoneDelegate.invoke: 调用callback,Angular单元测试代码里调用fixture.detectChanges, 内部放入zone执行的this._tick():


image.png

相关文章
|
前端开发 JavaScript
Angular 应用 bootstrapModule 映射的 app Component 的初始化逻辑
Angular 应用 bootstrapModule 映射的 app Component 的初始化逻辑
126 0
Angular 应用 bootstrapModule 映射的 app Component 的初始化逻辑
|
JavaScript 前端开发
Angular routerLink指令的href属性生成逻辑
Angular routerLink指令的href属性生成逻辑
189 0
Angular routerLink指令的href属性生成逻辑
|
Dart JavaScript 前端开发
Angular zone学习笔记
https://blog.thoughtram.io/angular/2016/01/22/understanding-zones.html 假设有这三个函数:
Angular zone学习笔记
Angular里interpolation text节点的创建逻辑,单步调试
通过一个例子来学习: 新建一个Component,只包含一个名为hero的属性,包含一个name字段,值为Jerry:
Angular里interpolation text节点的创建逻辑,单步调试
|
测试技术
Angular Jasmine单元测试用例spec.ts的加载逻辑
Angular Jasmine单元测试用例spec.ts的加载逻辑
71 0
Angular Jasmine单元测试用例spec.ts的加载逻辑
|
测试技术
使用FakeAsync对Angular异步代码进行单元测试
使用FakeAsync对Angular异步代码进行单元测试
185 0
使用FakeAsync对Angular异步代码进行单元测试
|
前端开发 测试技术
使用Async对Angular异步代码进行单元测试
使用Async对Angular异步代码进行单元测试
118 0
使用Async对Angular异步代码进行单元测试
|
1月前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
12 0
|
3月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
32 2

热门文章

最新文章