在refreshView里執行template function：

執行template：

template function如圖：

單步執行到[cxFocus]時：

再單步執行，進入函數??pureFunction0：

/*** @license* Copyright Google LLC All Rights Reserved.** Use of this source code is governed by an MIT-style license that can be* found in the LICENSE file at https://angular.io/license*/ /*** Bindings for pure functions are stored after regular bindings.** |-------decls------|---------vars---------| |----- hostVars (dir1) ------|* ------------------------------------------------------------------------------------------* | nodes/refs/pipes | bindings | fn slots | injector | dir1 | host bindings | host slots |* ------------------------------------------------------------------------------------------* ^ ^* TView.bindingStartIndex TView.expandoStartIndex** Pure function instructions are given an offset from the binding root. Adding the offset to the* binding root gives the first index where the bindings are stored. In component views, the binding* root is the bindingStartIndex. In host bindings, the binding root is the expandoStartIndex +* any directive instances + any hostVars in directives evaluated before it.** See VIEW_DATA.md for more information about host binding resolution.*/ /*** If the value hasn't been saved, calls the pure function to store and return the* value. If it has been saved, returns the saved value.** @param slotOffset the offset from binding root to the reserved slot* @param pureFn Function that returns a value* @param thisArg Optional calling context of pureFn* @returns value** @codeGenApi*/ function ??pureFunction0(slotOffset, pureFn, thisArg) {const bindingIndex = getBindingRoot() + slotOffset;const lView = getLView();return lView[bindingIndex] === NO_CHANGE ?updateBinding(lView, bindingIndex, thisArg ? pureFn.call(thisArg) : pureFn()) :getBinding(lView, bindingIndex); }

如果binding沒有變化，就updateBinding，否則執行getBinding：

執行pureFn：

？？：

成功將[cxFocus]綁定的值提取出來了：

index為22即將被填充：

再次看下Logic view的內部結構：

感覺該Component的所有屬性都包含在LView里了：

緊接著執行 ??property函數：

/*** @license* Copyright Google LLC All Rights Reserved.** Use of this source code is governed by an MIT-style license that can be* found in the LICENSE file at https://angular.io/license*/ /*** Update a property on a selected element.** Operates on the element selected by index via the {@link select} instruction.** If the property name also exists as an input property on one of the element's directives,* the component property will be set instead of the element property. This check must* be conducted at runtime so child components that add new `@Inputs` don't have to be re-compiled** @param propName Name of property. Because it is going to DOM, this is not subject to* renaming as part of minification.* @param value New value to write.* @param sanitizer An optional function used to sanitize the value.* @returns This function returns itself so that it may be chained* (e.g. `property('name', ctx.name)('title', ctx.title)`)** @codeGenApi*/ function ??property(propName, value, sanitizer) {const lView = getLView();const bindingIndex = nextBindingIndex();if (bindingUpdated(lView, bindingIndex, value)) {const tView = getTView();const tNode = getSelectedTNode();elementPropertyInternal(tView, tNode, lView, propName, value, lView[RENDERER], sanitizer, false);ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, bindingIndex);}return ??property; }

執行完畢：

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

總結

以上是生活随笔為你收集整理的Angular refreshView里Component template函数的执行原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。