为了更深入地了解Angular 2，我希望有人能够对组件，指令及其容器和视图的基础结构进行深入的解释/教程。
根据文档：
组件的容器可以包含两种视图。主机视图， 通过createComponent和Embedded实例化Component创建的 通过实例化嵌入式模板创建的视图 createEmbeddedView。视图容器的位置 包含View的视图由Anchor元素指定。每个视图 容器只能有一个锚元素，每个锚元素都可以 只有一个View容器。视图的根元素附加到 此容器成为Rendered中Anchor Element的兄弟 图。
这留下了许多未解决的问题，例如：
主机视图是指Component所在的元素，而Embedded视图是指组件的模板本身？
手动创建（通过createComponent）以及通过另一个托管组件（父级）以声明方式创建时，这两种情况都是如此吗？
指令也是如此，它没有模板（因此没有视图）？以及如何在Shadow dom环境（浏览器实际上支持组件主机）和模拟环境中如何工作？
Angular2确实做了很多魔术并且努力成为一名专家我希望更好地理解（可能通过视觉图表）整个关系： ViewContainerRef ，主机视图，模板，嵌入式模板， ViewChild ， ViewContainer 及其组件和指令的层次结构。< / p>
我认为自己非常精通Angular2（已经完成了2个大型项目）但仍然觉得我对下划线内部工作的理解存在漏洞。
当然，您不需要知道汽车是如何驾驶汽车的，但如果您这样做，您可以更好地处理它，
一如既往地谢谢，
肖恩
答案 0 :(得分：32)
有关详细信息，请阅读本文Working with DOM in Angular: unexpected consequences and optimization techniques
这留下了许多未解决的问题，例如：主机视图指的是 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}} ])
还有许多其他类型的节点，如directive data，查询数据等。
主机视图是一个视图，其中包含a-comp组件元素的数据和组件类A的数据。 Angular编译器为模块的bootstrap或entryComponents中定义的每个组件生成主机视图。当您调用factory.createComponent时，每个主机视图都负责创建组件视图。 componentFactoryResolver返回的工厂是主机视图工厂。
嵌入视图是为ng-template中指定的视图节点创建的视图。它类似于组件视图，但它没有包装器组件元素和组件数据，如注入器等。基本上，它缺少主机视图中包含的数据。但它仍然是一个有效的视图，并在检测过程中被检查为任何其他视图。
手动创建两种情况都是如此（通过 createComponent）以及在另一个中以声明方式创建时 托管组件（父母）？
如果在其他组件模板中指定了组件，则不使用主机视图。父组件视图包含通常在主机视图中定义的节点，此父视图负责创建子组件视图。
指令也是如此，它没有模板 （因此没有观点）？
是的，指令没有视图，因此没有为指令创建视图。
以及所有这些如何在Shadow dom环境中运行（实际上是浏览器 支持组件主机与模拟环境？
有一个与每个组件关联的渲染器，该渲染器知道是否使用模拟或阴影DOM渲染。渲染器由编译器根据组件装饰器描述符的viewEncapsulation参数定义。
以下是我推荐阅读的一些文章：