Angular进阶：View的概念

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关系是<my-anchor></my-anchor>view1 view2而不是<my-anchor>view1 view2</my-anchor>）。通过ViewContainerRef提供的API，我们可以插入View、取出View、改变View顺序……

在Angular中，View是构建应用UI的基本单元，DOM的构建和销毁是以View为单位的：同一个view中的元素要么一起被构建，要么一起被销毁。
在一个View中，DOM元素的Properties可以自由改变（比如改变样式、改变text节点的内容），但是View的DOM结构不能改变（不能单独插入和删除新元素、不能改变元素的顺序），因为上面已经说了：View是构建应用UI的基本单元，不可割裂。
要改变DOM结构，必须以View为单位：在ViewContainerRef中插入、删除、移动View。

TemplateRef是View的模板，它定义了View的结构。我们可以利用它来创建新的View实例，然后插入到ViewContainerRef中，这种View叫做Embedded View。
至于Component View，它是通过Component来定义的，与TemplateRef无关。

使用NgTemplateOutlet，你可以方便地从一个TemplateRef创建View实例并插入View中指定的位置，而不需要手动写操作ViewContainerRef的代码。

其中的Write a structural directive小节示范了如何操作ViewContainerRef（控制Embedded View），实现structural directive。

（只在源码中使用，没有解释）

Microsyntax和template input variable是编写和使用structural directive的利器。structural directive的使用者在自己的template中使用structural directive时，可以使用更简洁的语法。
template input variable，以这个为例，通过在ng-template上使用let-hero或者let-i="index"这样的语法来定义，hero和i成为占位符，具体的值由创建View实例时提供的context对象来决定。
let-hero这种没有显式指定绑定属性的template input variable，它的值是context.$implicit。

View可以层层嵌套，最终整个应用UI就是一棵View tree。