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

87 阅读1分钟

我有一个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的原创文章,尽在:“汪子熙”: