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重新刷新视图的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。