我有一個Angular Component：

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

Angular編譯器編譯后生成的JavaScript代碼：

這些??elementStart函數的執行上下文：在templateFn里被調用：

單步調試下圖的第48行代碼：

即進入??elementStart：

/*** 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標簽元素：

并作為app-root的子節點，插入到DOM tree里。

div標簽內的text文本，也通過函數createTextNode動態創建的text標簽來承載：

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

我有一個Angular Component：

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

Angular編譯器編譯后生成的JavaScript代碼：

這些??elementStart函數的執行上下文：在templateFn里被調用：

單步調試下圖的第48行代碼：

即進入??elementStart：

/*** 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標簽元素：

并作為app-root的子節點，插入到DOM tree里。

div標簽內的text文本，也通過函數createTextNode動態創建的text標簽來承載：

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

總結

以上是生活随笔為你收集整理的Angular ɵɵelementStart和ɵɵText的工作原理的全部內容，希望文章能夠幫你解決所遇到的問題。

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