天天看点

Angular应用input和div标签页的动态创建场景

index.html:

Angular应用input和div标签页的动态创建场景

  • modulesToDom
  • addStyle
  • insertStyleElement
  • Angular应用input和div标签页的动态创建场景
    Angular应用input和div标签页的动态创建场景
    Angular应用input和div标签页的动态创建场景
    Angular应用input和div标签页的动态创建场景
  • /**

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

   const tView = getTView();

   const adjustedIndex = HEADER_OFFSET + index;

   ngDevMode &&

       assertEqual(getBindingIndex(), tView.bindingStartIndex, 'elements should be created before any bindings');

   ngDevMode && ngDevMode.rendererCreateElement++;

   ngDevMode && assertDataInRange(lView, adjustedIndex);

   const renderer = lView[RENDERER];

   const native = lView[adjustedIndex] = elementCreate(name, renderer, getNamespace());

   const tNode = tView.firstCreatePass ?

       elementStartFirstCreatePass(index, tView, lView, native, name, attrsIndex, localRefsIndex) :

       (/** @type {?} */ (tView.data[adjustedIndex]));

   setPreviousOrParentTNode(tNode, true);

   const mergedAttrs = tNode.mergedAttrs;

   if (mergedAttrs !== null) {

       setUpAttributes(renderer, native, mergedAttrs);

   }

   const classes = tNode.classes;

   if (classes !== null) {

       writeDirectClass(renderer, native, classes);

   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应用input和div标签页的动态创建场景

core.js->animation.js->platform-browser.js

从core到animation再到platform-browser:

Angular应用input和div标签页的动态创建场景
Angular应用input和div标签页的动态创建场景
Angular应用input和div标签页的动态创建场景
Angular应用input和div标签页的动态创建场景
Angular应用input和div标签页的动态创建场景

继续阅读