通過一個例子來學習：

新建一個Component，只包含一個名為hero的屬性，包含一個name字段，值為Jerry：

export class AppComponent implements OnInit {hero = {name: 'Jerry'};

Component的template頁面就一行語句，利用interpolation顯示hero屬性的name字段：

在renderView函數里，查看該template編譯之后的源代碼：

naming convention：

AppComponent_Template:

創建一個原生的text節點：

function ??text(index, value = '') {/** @type {?} */const lView = getLView();/** @type {?} */const tView = getTView();/** @type {?} */const adjustedIndex = index + HEADER_OFFSET;ngDevMode &&assertEqual(getBindingIndex(), tView.bindingStartIndex, 'text nodes should be created before any bindings');ngDevMode && assertDataInRange(lView, adjustedIndex);/** @type {?} */const tNode = tView.firstCreatePass ?getOrCreateTNode(tView, lView[T_HOST], index, 3 /* Element */, null, null) :(/** @type {?} */ (tView.data[adjustedIndex]));/** @type {?} */const textNative = lView[adjustedIndex] = createTextNode(value, lView[RENDERER]);appendChild(tView, lView, textNative, tNode);// Text nodes are self closing.setPreviousOrParentTNode(tNode, false); }

原生text節點通過renderer創建：

function createTextNode(value, renderer) {ngDevMode && ngDevMode.rendererCreateTextNode++;ngDevMode && ngDevMode.rendererSetText++;return isProceduralRenderer(renderer) ? renderer.createText(value) :renderer.createTextNode(value); }

原生text節點創建好之后，platform-browser.js里，調用原生的HTML DOM的appendChild方法，將創建好的text節點，插入到DOM tree里：

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

總結

以上是生活随笔為你收集整理的Angular里interpolation text节点的创建逻辑，单步调试的全部內容，希望文章能夠幫你解決所遇到的問題。

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