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

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

index.html:image.png

  • modulesToDom
  • addStyle
  • insertStyleElement
  • image.png image.pngimage.pngimage.png
  • /**

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

   }

}

image.png

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

从core到animation再到platform-browser:

image.png image.pngimage.pngimage.pngimage.png

目录
相关文章
|
1月前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
12 0
|
29天前
|
JavaScript
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
|
1月前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍
15 1
|
7天前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript在Angular开发中的应用
【4月更文挑战第30天】本文探讨了TypeScript在Angular开发中的应用。Angular与TypeScript的结合利用了静态类型检查和ECMAScript特性,简化了大型Web应用的开发。文章涵盖组件、数据绑定、依赖注入、服务、守卫和路由以及模块化等方面,展示了如何在Angular中有效使用TypeScript。此外,还提到了TypeScript的高级应用,如泛型、高级类型和装饰器。掌握这些知识将有助于提升Angular应用的可维护性和可扩展性。
|
2月前
|
开发框架 前端开发 安全
Angular:构建现代Web应用的终极选择
Angular:构建现代Web应用的终极选择
26 0
|
3月前
|
Go
Mac安装Angular并部署运行应用
Mac安装Angular并部署运行应用
|
3月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
32 2
|
4月前
Angular 应用里异步打开对话框的技术实现
Angular 应用里异步打开对话框的技术实现
22 0
|
4月前
|
Web App开发 UED 开发者
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
42 1
|
4月前
|
缓存 前端开发 JavaScript
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
45 0

热门文章

最新文章