作为“为大型前端项目”而设计的前端框架，Angular 其实有许多值得参考和学习的设计，本系列主要用于研究这些设计和功能的实现原理。本文主要围绕 Angular 中与视图有关的一些定义进行介绍。
Angular 中的视图抽象Angular 版本可在不同的平台上运行：在浏览器中、在移动平台上或在 Web Worker 中。因此，需要特定级别的抽象来介于平台特定的 API 和框架接口之间。
Angular 中通过抽象封装了不同平台的差异，并以下列引用类型的形式出现：ElementRef，TemplateRef，ViewRef，ComponentRef和ViewContainerRef。
各抽象类视图定义在阅读源码的时候，如果不清楚这些定义之间的区别，很容易搞混淆。所以，这里我们先来理解下它们之间的区别。
元素 ElementRef
ElementRef是最基本的抽象。如果观察它的类结构，可以看到它仅包含与其关联的本地元素：
export class ElementRef<T = any> { // 基础原生元素 // 如果不支持直接访问原生元素（例如当应用程序在 Web Worker 中运行时），则为 null public nativeElement: T; constructor(nativeElement: T) { this.nativeElement = nativeElement; } ... }
该 API 可用于直接访问本地 DOM 元素，可以比作document.getElementById('myId')。但 Angular 并不鼓励直接使用，尽可能使用 Angular 提供的模板和数据绑定。
模板 TemplateRef
在 Angular 中，模板用来定义要如何在 HTML 中渲染组件视图的代码。
模板通过@Component()装饰器与组件类类关联起来。模板代码可以作为template属性的值用内联的方式提供，也可以通过 templateUrl属性链接到一个独立的 HTML 文件。
用TemplateRef对象表示的其它模板用来定义一些备用视图或内嵌视图，它们可以来自多个不同的组件。TemplateRef是一组 DOM 元素（ElementRef），可在整个应用程序的视图中重复使用：
export abstract class TemplateRef<C> { // 此嵌入视图的父视图中的 anchor 元素 abstract get elementRef(): ElementRef; // 基于此模板实例化嵌入式视图，并将其附加到视图容器 abstract createEmbeddedView(context: C): EmbeddedViewRef<C>; ... }
就其本身而言，TemplateRef类是一个简单的类，仅包括：
elementRef属性：拥有对其宿主元素的引用
createEmbeddedView方法：它允许我们创建视图并将其引用作为ViewRef返回。
模板会把纯 HTML 和 Angular 的数据绑定语法、指令和模板表达式组合起来。Angular 的元素会插入或计算那些值，以便在页面显示出来之前修改 HTML 元素。
在 Angular 中，视图是可显示元素的最小分组单位，它们会被同时创建和销毁。Angular 哲学鼓励开发人员将 UI 视为视图的组合（而不是独立的 html 标签树）。
组件(component) 类及其关联的模板(template)定义了一个视图。具体实现上，视图由一个与该组件相关的ViewRef实例表示。
ViewRef
ViewRef表示一个 Angular 视图：
export declare abstract class ViewRef extends ChangeDetectorRef { // 销毁该视图以及与之关联的所有数据结构 abstract get destroyed(): boolean; // 报告此视图是否已被销毁 abstract destroy(): void; // 生命周期挂钩，为视图提供其他开发人员定义的清理功能 abstract onDestroy(callback: Function): any; }
其中，ChangeDetectorRef提供更改检测功能的基类，用于更改检测树收集所有要检查更改的视图：
export declare abstract class ChangeDetectorRef { // 当输入已更改或视图中触发了事件时，通常会将组件标记为脏（需要重新渲染） // 调用此方法以确保即使没有发生这些触发器，也要检查组件 abstract checkNoChanges(): void; // 从变更检测树中分离该视图。在重新连接分离视图之前，不会对其进行检查。 // 与 detectChanges() 结合使用可实现本地变更检测检查 abstract detach(): void; // 检查此视图及其子级，与 detach() 结合使用可实现本地更改检测检查 abstract detectChanges(): void; // 检查变更检测器及其子级，如果检测到任何变更，则抛出该异常 abstract markForCheck(): void; // 将先前分离的视图重新附加到变更检测树 // 默认情况下，视图将附加到树上 abstract reattach(): void; }
两种类型的视图
Angular 支持两种类型的视图：
(1) 链接到模板（template）的嵌入式视图（embeddedView）。
嵌入式视图表示视图容器中的 Angular 视图。模板只是保存视图的蓝图，可以使用上述的createEmbeddedView方法从模板实例化视图。
(2) 链接到组件（component）的宿主视图（hostView）。
直属于某个组件的视图叫做宿主视图。