为了更深入地了解Angular 2,我希望有人能够对组件,指令及其容器和视图的底层结构进行深入的解释/教程.
根据文档:
组件的容器可以包含两种视图.通过createComponent实例化组件创建的主机视图和通过createEmbeddedView实例化嵌入式模板创建的嵌入式视图.视图容器在包含视图中的位置由Anchor元素指定.每个视图容器只能有一个锚元素,每个锚元素只能有一个视图容器.附加到此容器的视图的根元素将成为"渲染视图"中"锚点元素"的兄弟元素.
这留下了许多未解决的问题,例如:
一个主机视图指的是组件驻留在元件和嵌入式视图指的是组件的模板本身？
在手动创建(通过createComponent)以及通过另一个托管组件(父级)以声明方式创建时,这两种情况都是如此吗？
指令也是如此,它没有模板(因此没有视图)？以及如何在Shadow dom环境(浏览器实际上支持组件主机)和模拟环境中如何工作？
Angular2确实做了很多魔术,并且为了成为一名专家,我希望更好地理解(可能通过可视化图表)整个关系:ViewContainerRef,主机视图,模板,嵌入式模板,ViewChild,ViewContainer及其层次结构组件和指令.
我认为自己非常精通Angular2(已经完成了2个大型项目)但仍然觉得我对下划线内部工作的理解存在漏洞.
当然你不需要知道汽车是如何驾驶汽车的,但如果你这样做,你会更好地处理它,
一如既往地谢谢,
肖恩
Max*_*kyi 37
有关深入信息,请阅读本文使用Angular中的DOM:意外后果和优化技术
这留下了许多未解决的问题,例如:主机视图是指Component所在的元素,而Embedded视图是指组件的模板本身？
Angular中的每个组件都表示为带有节点的视图.视图中的大多数节点类似于组件模板结构并表示DOM节点.例如,您有一个A带有a-comp选择器的组件和以下模板:
<h1>I am header</h1>
<span>I am {{name}}</span>
编译器生成以下视图节点:
elementDataNode(h1)
textDataNode(I am header)
elementDataNode(span)
textDataNode(I am + bindings:[ {{name}} ])
还有许多其他类型的节点,如指令数据,查询数据等.
主机视图是一个视图,包含a-comp组件元素的数据和组件类的数据A.角编译器中定义的每个组件生成主机的观点bootstrap或entryComponents一个模块的.每个主机视图都负责在您调用时创建组件视图factory.createComponent.返回的工厂是componentFactoryResolver主机视图工厂.
嵌入视图是为在中指定的视图节点创建的视图ng-template.它就像一个组件视图,但它没有包装器组件元素和组件数据,如注入器等.基本上它缺少主机视图中包含的数据.但它仍然是一个有效的视图,并在检测过程中检查任何其他视图.
对于手动创建(通过createComponent)以及通过另一个托管组件(父级)以声明方式创建的两种情况都是如此吗？
如果在其他组件模板中指定了组件,则不使用主机视图.父组件视图包含通常在主机视图中定义的节点,此父视图负责创建子组件视图.
指令也是如此,它没有模板(因此没有视图)？
对,指令没有视图,因此没有为指令创建视图.
以及如何在Shadow dom环境(浏览器实际上支持组件主机)和模拟环境中如何工作？
有一个与每个组件关联的渲染器,该渲染器知道是否使用模拟或阴影DOM渲染.渲染器由编译器根据viewEncapsulation组件装饰器描述符的参数定义.
以下是我推荐阅读的一些文章:
| 归档时间： |
|
| 查看次数： |
7872 次 |
| 最近记录： |