视图、宿主视图和嵌入视图有什么区别

Question

为了更深入地了解 Angular 2，我希望有人能就组件、指令及其容器和视图的底层结构创建一个深入的解释/教程。

根据文档：

组件的容器可以包含两种视图。主机视图， 通过 createComponent 实例化组件创建，并嵌入 视图，通过实例化嵌入式模板创建 创建嵌入式视图。 View Container 在视图中的位置 包含 View 由 Anchor 元素指定。每个视图 容器只能有一个锚元素，每个锚元素可以 只有一个视图容器。附加到的视图的根元素 这个容器成为渲染中的锚元素的兄弟姐妹 查看。

这留下了许多悬而未决的问题，例如：

Host View是指组件所在的元素，而Embedded view是指组件的模板本身？

在手动创建（通过createComponent）以及通过在另一个托管组件（父级）中以声明方式创建时，这两种情况都成立吗？

对于没有模板（因此没有视图）的指令也是如此吗？以及这一切在 Shadow dom 环境（浏览器实际上支持组件主机）与模拟环境中是如何工作的？

Angular2 确实做了很多神奇的事情，为了成为专家，我希望更好地理解（可能通过可视化图表）：ViewContainerRef、Host 视图的整个关系、模板、嵌入式模板、ViewChild、ViewContainer及其组件和指令的层次结构。

我认为自己非常精通 Angular2（已经交付了 2 个大型项目），但我仍然觉得我对内部工作原理的理解存在漏洞。

当然，你不需要知道一辆车是如何工作的，但如果你知道，你会更好地驾驭它，

一如既往的感谢，

肖恩

Answer 1

有关深入信息，请阅读本文Working with DOM in Angular: unexpected consequences and optimization techniques

这留下了许多悬而未决的问题，例如：主机视图指的是 Component 所在的元素，Embedded 视图是 指的是组件的模板本身？

组件视图

Angular 中的每个组件都表示为一个带有节点的视图。视图中的大多数节点类似于组件模板结构并代表 DOM 节点。例如，您有一个带有 a-comp 选择器和以下模板的组件 A：

<h1>I am header</h1>
<span>I am {{name}}</span>

编译器生成以下视图节点：

elementDataNode(h1)
textDataNode(I am header)
elementDataNode(span)
textDataNode(I am + bindings:[ {{name}} ])

还有很多其他类型的节点，如directive data、查询数据等。

主机视图

宿主视图是一个包含a-comp 组件元素的数据和组件类A 的数据的视图。 Angular 编译器为模块的bootstrap 或entryComponents 中定义的每个组件生成主机视图。当你调用factory.createComponent 时，每个宿主视图负责创建一个组件视图。 componentFactoryResolver 返回的工厂是宿主视图工厂。

嵌入式视图

嵌入视图是为ng-template 中指定的视图节点创建的视图。它就像一个组件视图，但它没有包装器组件元素和注入器等组件数据。基本上，它缺少主机视图中包含的数据。但它仍然是一个有效的视图，并且在检测过程中会像任何其他视图一样进行检查。

在手动创建时这两种情况都是如此（通过 createComponent) 以及通过在另一个中以声明方式创建时 托管组件（父级）？

如果在另一个组件模板中指定了一个组件，则不使用宿主视图。父组件视图包含通常在宿主视图中定义的节点，并且该父视图负责创建子组件视图。

对于没有模板的指令也是如此吗 （因此没有视图）？

是的，指令没有视图，因此没有为指令创建视图。

以及这一切在 Shadow dom 环境中是如何工作的（实际上是浏览器 支持组件主机）还是模拟环境？

每个组件都有一个渲染器，该渲染器知道是使用模拟还是影子 DOM 渲染。渲染器由编译器根据组件装饰器描述符的viewEncapsulation参数定义。

以下是我推荐阅读的一些文章：

• Exploring Angular DOM manipulation techniques using ViewContainerRef
• Here is why you will not find components inside Angular
• The mechanics of DOM updates in Angular
• The mechanics of property bindings update in Angular
• Everything you need to know about change detection in Angular