Angular里使用createEmbeddedView的单步调试

入口:点击按钮:

Angular里使用createEmbeddedView的单步调试

jerryContainer的定义:ViewContainerRef

Angular里使用createEmbeddedView的单步调试
Angular里使用createEmbeddedView的单步调试

_hostTNode:

Angular里使用createEmbeddedView的单步调试
Angular里使用createEmbeddedView的单步调试

container_id:

Angular里使用createEmbeddedView的单步调试

_hostView:

Angular里使用createEmbeddedView的单步调试

_lContainer:

Angular里使用createEmbeddedView的单步调试

需要添加的视图片段:

Angular里使用createEmbeddedView的单步调试

_ngContext_的内容:包含了视图所有的UI元素:

Angular里使用createEmbeddedView的单步调试
Angular里使用createEmbeddedView的单步调试
Angular里使用createEmbeddedView的单步调试

首先创建,再渲染:

Angular里使用createEmbeddedView的单步调试
Angular里使用createEmbeddedView的单步调试

渲染添加后的view片段:

Angular里使用createEmbeddedView的单步调试

渲染视图就是执行它的template function:

Angular里使用createEmbeddedView的单步调试
Angular里使用createEmbeddedView的单步调试

开始生成view里的DOM元素了:这一点和SAP WebClient UI类似:

Angular里使用createEmbeddedView的单步调试
Angular里使用createEmbeddedView的单步调试

最后还是调用浏览器的原生api:document.createElement来创建span节点:

Angular里使用createEmbeddedView的单步调试

要获取更多Jerry的原创文章,请关注公众号"汪子熙":
Angular里使用createEmbeddedView的单步调试