Angular Component模板里的元素，运行时如何被生成并插入到DOM tree中

我有一个selector为app-root的Angular Component：

其模板文件里只有一行html代码：

在运行时，这个h1标签是如何插入到整个DOM tree里的呢？

在Angular bootstrap时，根据selector app-root使用ComponentFactory创建Component reference：

创建完application Component之后，立即执行renderView方法：

在render方法里执行view的template函数：

executeTemplate的具体实现：

在函数ɵɵelementStart内部：

把2代表的h1，即child 节点，append到1代表的app-root上去：

最后在platform-browser.js实现的class DefaultDomRenderer2里，调用dom节点的appendChild原生方法，完成节点插入到DOM tree的操作：

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

Angular Component模板里的元素，运行时如何被生成并插入到DOM tree中相关推荐

ACM 投稿时CCS CONCEPTS 生成及插入
ACM 投稿时CCS CONCEPTS 生成及插入前段时间千辛万苦把论文投出去,硬着头皮把会议开完,本以为万事大吉,今天晚上又给我发邮件说我文章里CCS CONCEPTS没有,让我修改.但是我不知道 ...
如何从Angular的ActivatedRoute数据结构中获得运行时路由信息
看个具体的例子: 路由配置信息: const CUSTOM_ROUTES: Routes = [{ path: "custom/:id", component: RouteDemo ...
SAP Spartacus page slot里的Component，对应的DOM节点是如何插入到DOM tree里的
例子:我新建了一个AppComponent,映射到了ManageCostCentersListComponent: 运行时的效果: 这个AppComponent对应的app-root是如何被添加到DO ...
swagger 扫描java文档_推荐一款在运行时通过javadoc生成Swagger API文档的库
介绍一般,我们使用Springfox生成swagger api文档,但Springfox不支持从javadoc中生成,只能通过注解的方式标注文档. 这样,当共享一些POJO类时,为了同时生成java ...
java 捕获运行时异常_java-如何通过ASM在字节码中捕获运行时异常
我试图通过异常捕获运行时异常.我能够捕获通常的方法退出事件. 但是,控件永远不会到达opcode == Opcodes.ATHROW. 我认为在调用事件时做错了事. 这是我的示例代码: public ...
Angular jasmine单元测试框架spec的运行时数据结构
以我单元测试里这段代码为例: 通过describe函数创建一个suite,即spec的集合: 真正的spec由函数it创建:其中expectable是human readable的字符串描述信息,描述 ...
Angular form控件原生HTML代码里ng-reflect-form属性和其值的生成时机
简单的Component代码: import { Component } from '@angular/core'; import { FormControl } from '@angular/for ...
JVM运行时数据区和各个区域的作用
一.JVM主要分为5个核心区域(6个子区域),分别是: 程序计数器 Java虚拟机栈本地方法栈 Java堆方法区 *运行时常量池(属于"方法区"的一部分) 二.各个区域作用和描 ...
通过运行时单步调试弄清楚[(ngModel)]的双向绑定的工作原理
Component HTML: <input type="text" maxlength="40" nz-input placeholder=" ...

Angular Component模板里的元素，运行时如何被生成并插入到DOM tree中

Angular Component模板里的元素，运行时如何被生成并插入到DOM tree中相关推荐

最新文章

热门文章