Angular里interpolation text节点的创建逻辑，单步调试

通过一个例子来学习：

新建一个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的原创文章，尽在：“汪子熙”: