通過一個(gè)例子來學(xué)習(xí)：

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

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

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

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

naming convention：

AppComponent_Template:

創(chuàng)建一個(gè)原生的text節(jié)點(diǎn)：

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節(jié)點(diǎn)通過renderer創(chuàng)建：

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

原生text節(jié)點(diǎn)創(chuàng)建好之后，platform-browser.js里，調(diào)用原生的HTML DOM的appendChild方法，將創(chuàng)建好的text節(jié)點(diǎn)，插入到DOM tree里：

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

總結(jié)

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

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