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