Angular官方文档并没有详细地对View的概念做讲解,相关的知识点零散分布在几个页面中,在这里总结一下。
ViewContainerRef
- 在Angular中,只有两种View:Host Views(也叫作Component View)和Embedded View。这点从源码中的isComponentView和isEmbeddedView也能得到证实。
- View必须要放在ViewContainerRef容器中才能显示。
- ViewContainerRef容器是挂载在元素上的。通过依赖注入或者 ViewChild query,你可以拿到任何元素上的ViewContainerRef。为了节约资源,Angular只为【真正用到ViewContainerRef的元素】实例化ViewContainerRef。拥有ViewContainerRef的元素叫做Anchor element。
- ViewContainerRef容器中可以放置多个View实例,这些View会成为Anchor element的siblings(DOM关系是@H_403_14@<my-anchor></my-anchor>view1 view2而不是@H_403_14@<my-anchor>view1 view2</my-anchor>)。通过ViewContainerRef提供的API,我们可以插入View、取出View、改变View顺序……
EmbeddedViewRef
- 在Angular中,View是构建应用UI的基本单元,DOM的构建和销毁是以View为单位的:同一个view中的元素要么一起被构建,要么一起被销毁。
- 在一个View中,DOM元素的Properties可以自由改变(比如改变样式、改变text节点的内容),但是View的DOM结构不能改变(不能单独插入和删除新元素、不能改变元素的顺序),因为上面已经说了:View是构建应用UI的基本单元,不可割裂。
- 要改变DOM结构,必须以View为单位:在ViewContainerRef中插入、删除、移动View。
TemplateRef
- TemplateRef是View的模板,它定义了View的结构。我们可以利用它来创建新的View实例,然后插入到ViewContainerRef中,这种View叫做Embedded View。
- 至于Component View,它是通过Component来定义的,与TemplateRef无关。
NgTemplateOutlet
- 使用NgTemplateOutlet,你可以方便地从一个TemplateRef创建View实例并插入View中指定的位置,而不需要手动写操作ViewContainerRef的代码。
guide/structural-directives
- 其中的Write a structural directive小节示范了如何操作ViewContainerRef(控制Embedded View),实现structural directive。
guide/dynamic-component-loader
- 这个教程示范了如何在ViewContainerRef中插入Component实例(控制Component View),实现动态加载Component。
ViewRef
(只在源码中使用,没有解释)
Microsyntax和template input variable
- Microsyntax和template input variable是编写和使用structural directive的利器。structural directive的使用者在自己的template中使用structural directive时,可以使用更简洁的语法。
- template input variable,以这个为例, 通过在ng-template上使用@H_403_14@let-hero或者@H_403_14@let-i="index"这样的语法来定义,@H_403_14@hero和@H_403_14@i成为占位符,具体的值由创建View实例时提供的context对象来决定。
- @H_403_14@let-hero这种没有显式指定绑定属性的template input variable,它的值是context.$implicit。
glossary#view
View可以层层嵌套,最终整个应用UI就是一棵View tree。