Angular ɵɵelementStart和ɵɵText的工作原理-CFANZ编程社区

我有一个Angular Component：

@Component({
  selector: "app-root",
  template: `
  <div cxFocuses>Painful</div>
  `
})
export class AppComponent {

}

Angular编译器编译后生成的JavaScript代码：

Angular ɵɵelementStart和ɵɵText的工作原理_javascript

这些ɵɵelementStart函数的执行上下文：在templateFn里被调用：

Angular ɵɵelementStart和ɵɵText的工作原理_动态创建_02

Angular ɵɵelementStart和ɵɵText的工作原理_子节点_03

单步调试下图的第48行代码：

Angular ɵɵelementStart和ɵɵText的工作原理_子节点_04

即进入ɵɵelementStart：

Angular ɵɵelementStart和ɵɵText的工作原理_动态创建_05

/**
 * Create DOM element. The instruction must later be followed by `elementEnd()` call.
 *
 * \@codeGenApi
 * @param {?} index Index of the element in the LView array
 * @param {?} name Name of the DOM Node
 * @param {?=} attrsIndex Index of the element's attributes in the `consts` array.
 * @param {?=} localRefsIndex Index of the element's local references in the `consts` array.
 *
 * Attributes and localRefs are passed as an array of strings where elements with an even index
 * hold an attribute name and elements with an odd index hold an attribute value, ex.:
 * ['id', 'warning5', 'class', 'alert']
 *
 * @return {?}
 */
function ɵɵelementStart(index, name, attrsIndex, localRefsIndex) {
    /** @type {?} */
    const lView = getLView();
    /** @type {?} */
    const tView = getTView();
    /** @type {?} */
    const adjustedIndex = HEADER_OFFSET + index;
    ngDevMode &&
        assertEqual(getBindingIndex(), tView.bindingStartIndex, 'elements should be created before any bindings');
    ngDevMode && ngDevMode.rendererCreateElement++;
    ngDevMode && assertDataInRange(lView, adjustedIndex);
    /** @type {?} */
    const renderer = lView[RENDERER];
    /** @type {?} */
    const native = lView[adjustedIndex] = elementCreate(name, renderer, getNamespace());
    /** @type {?} */
    const tNode = tView.firstCreatePass ?
        elementStartFirstCreatePass(index, tView, lView, native, name, attrsIndex, localRefsIndex) :
        (/** @type {?} */ (tView.data[adjustedIndex]));
    setPreviousOrParentTNode(tNode, true);
    /** @type {?} */
    const mergedAttrs = tNode.mergedAttrs;
    if (mergedAttrs !== null) {
        setUpAttributes(renderer, native, mergedAttrs);
    }
    /** @type {?} */
    const classes = tNode.classes;
    if (classes !== null) {
        writeDirectClass(renderer, native, classes);
    }
    /** @type {?} */
    const styles = tNode.styles;
    if (styles !== null) {
        writeDirectStyle(renderer, native, styles);
    }
    appendChild(tView, lView, native, tNode);
    // any immediate children of a component or template container must be pre-emptively
    // monkey-patched with the component view data so that the element can be inspected
    // later on using any element discovery utility methods (see `element_discovery.ts`)
    if (getElementDepthCount() === 0) {
        attachPatchData(native, lView);
    }
    increaseElementDepthCount();
    if (isDirectiveHost(tNode)) {
        createDirectivesInstances(tView, lView, tNode);
        executeContentQueries(tView, tNode, lView);
    }
    if (localRefsIndex !== null) {
        saveResolvedLocalsInData(lView, tNode);
    }
}

ɵɵelementStart函数内部会动态创建div标签元素：

Angular ɵɵelementStart和ɵɵText的工作原理_子节点_06

并作为app-root的子节点，插入到DOM tree里。

Angular ɵɵelementStart和ɵɵText的工作原理_javascript_07

div标签内的text文本，也通过函数createTextNode动态创建的text标签来承载：

Angular ɵɵelementStart和ɵɵText的工作原理_动态创建_08

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

Angular ɵɵelementStart和ɵɵText的工作原理_子节点_09