且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-09-14 08:50:19

Angular ɵɵelementStart和ɵɵText的工作原理Angular ɵɵelementStart和ɵɵText的工作原理Angular ɵɵelementStart和ɵɵText的工作原理Angular ɵɵelementStart和ɵɵText的工作原理Angular ɵɵelementStart和ɵɵText的工作原理Angular ɵɵelementStart和ɵɵText的工作原理/**

* 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);

   }

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