_zone.onMicrotaskEmpty的觸發(fā)起始位置：

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方法的實(shí)現(xiàn)會調(diào)用視圖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;}}

遞歸調(diào)用refreshView：

refreshView里執(zhí)行view template：

從調(diào)試器里能看出template所屬的host DOM element，在這個例子里是UnitDetailsComponent內(nèi)的cx-org-card標(biāo)簽里第一個div元素：

這里待執(zhí)行的setter的property和value都已經(jīng)自動生成了：

這里的highlight似乎有問題，應(yīng)該是第三行被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__應(yīng)該不能被應(yīng)用程序使用：

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的Angular的_zone.onMicrotaskEmpty最终会通过changeDetect重新刷新视图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。