Angular的_zone.onMicrotaskEmpty最终会通过changeDetect重新刷新视图

_zone.onMicrotaskEmpty的触发起始位置：

class ApplicationRef {/** @internal */constructor(_zone, _console, _injector, _exceptionHandler, _componentFactoryResolver, _initStatus) {this._zone = _zone;this._console = _console;this._injector = _injector;this._exceptionHandler = _exceptionHandler;this._componentFactoryResolver = _componentFactoryResolver;this._initStatus = _initStatus;/** @internal */this._bootstrapListeners = [];this._views = [];this._runningTick = false;this._enforceNoNewChanges = false;this._stable = true;/*** Get a list of component types registered to this application.* This list is populated even before the component is created.*/this.componentTypes = [];/*** Get a list of components registered to this application.*/this.components = [];this._enforceNoNewChanges = isDevMode();this._zone.onMicrotaskEmpty.subscribe({next: () => {this._zone.run(() => {this.tick();});}});

tick方法的实现会调用视图view的detectChange方法：

/*** Invoke this method to explicitly process change detection and its side-effects.** In development mode, `tick()` also performs a second change detection cycle to ensure that no* further changes are detected. If additional changes are picked up during this second cycle,* bindings in the app have side-effects that cannot be resolved in a single change detection* pass.* In this case, Angular throws an error, since an Angular application can only have one change* detection pass during which all change detection must complete.*/tick() {if (this._runningTick) {throw new Error('ApplicationRef.tick is called recursively');}try {this._runningTick = true;for (let view of this._views) {view.detectChanges();}if (this._enforceNoNewChanges) {for (let view of this._views) {view.checkNoChanges();}}}catch (e) {// Attention: Don't rethrow as it could cancel subscriptions to Observables!this._zone.runOutsideAngular(() => this._exceptionHandler.handleError(e));}finally {this._runningTick = false;}}

递归调用refreshView：

refreshView里执行view template：

从调试器里能看出template所属的host DOM element，在这个例子里是UnitDetailsComponent内的cx-org-card标签里第一个div元素：

这里待执行的setter的property和value都已经自动生成了：

这里的highlight似乎有问题，应该是第三行被highlight才对：

function ngOnChangesSetInput(instance, value, publicName, privateName) {const simpleChangesStore = getSimpleChangesStore(instance) ||setSimpleChangesStore(instance, { previous: EMPTY_OBJ, current: null });const current = simpleChangesStore.current || (simpleChangesStore.current = {});const previous = simpleChangesStore.previous;const declaredName = this.declaredInputs[publicName];const previousChange = previous[declaredName];current[declaredName] = new SimpleChange(previousChange && previousChange.currentValue, value, previous === EMPTY_OBJ);instance[privateName] = value;
}

instance：FocusDirective

这个__ngSimpleChanges__应该不能被应用程序使用：

更多Jerry的原创文章，尽在：“汪子熙”:

Angular的_zone.onMicrotaskEmpty最终会通过changeDetect重新刷新视图相关推荐

angular 强制更新视图_angular4强制刷新视图的方法
angular4强制刷新视图的方法使用angular的过程中有时会出现数据已经更新了,但是对于的视图没有更新,针对这一情况,可以是用angular提供的方法强制更新视图. 这里使用NGZone来更新 ...
Angular 项目打包之后，部署到服务器，刷新访问404解决方法
将前端代码打包部署到Java服务器中,当跳转到相应路由界面,刷新地址,服务找不到地址页面,所以会报 404 - Page Not Found. 解决方法:只需要将路由转换成哈希值: userHas ...
使用百度echarts制作可视化大屏——最终效果和动态数据刷新
最终效果如下图: 接下来就是数据动态刷新了,这个没什么好说的,就是一个$.post的事,传递一个json给自定义的refresh函数就行了. $.post(url,null,function(d){ ...
angular 强制刷新视图
使用angular的过程中有时会出现数据已经更新了,但是对于的视图没有更新,针对这一情况,可以是用angular提供的方法强制更新视图. import { Component, OnInit } fr ...
Angular 变化检测详解
作者:PingCode 产品研发部研发二组负责人王凯前言变化检测是前端框架中很有趣的一部分内容,各个前端的框架也都有自己的一套方案,一般情况下我们不太需要过多的了解变化检测,因为框架已经帮我们完成 ...
Angular property binding重复触发的问题讨论
Component template文件源代码: <button [disabled]="isDisabled" >Click me</button> Co ...
Angular 个人深究（三）【由InputOutput引起的】
Angular 个人深究(三)[由Input&Output引起的] 注:最近项目在做别的事情,angular学习停滞了 1.Angular 中 @Input与@Output的使用 //test ...
angular react_Angular 2 vs React：将会有鲜血
angular react Angular 2 has reached Beta and appears poised to become the hot new framework of 2016. ...
angular java_带有Angular JS的Java EE 7 –第1部分
angular java 今天的帖子将向您展示如何使用Java EE 7和Angular JS构建一个非常简单的应用程序. 在去那里之前,让我告诉您一个简短的故事: 我必须承认,我从来都不是Java语 ...

Angular的_zone.onMicrotaskEmpty最终会通过changeDetect重新刷新视图

Angular的_zone.onMicrotaskEmpty最终会通过changeDetect重新刷新视图相关推荐

最新文章

热门文章