视图，主机视图和嵌入式视图之间有什么区别 [英] What is the difference between a view, a host view and an embedded view

问题描述

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

In an effort to gain deeper knowledge into Angular 2 I wish someone would create an in-depth explanation/tutorial on the underlying structure of components, directives and their containers and views.

根据文档:

组件的容器可以包含两种视图.主机视图 通过createComponent实例化一个Component创建并嵌入 通过实例化嵌入式模板创建的视图 createEmbeddedView.视图容器在 包含View的元素是由Anchor元素指定的.每个视图 容器只能有一个锚元素，每个锚元素可以 只有一个视图容器.附加到的视图的根元素 此容器成为渲染"中的锚"元素的同级对象 查看.

The component’s container can contain two kinds of Views. Host Views, created by instantiating a Component via createComponent, and Embedded Views, created by instantiating an Embedded Template via createEmbeddedView. The location of the View Container within the containing View is specified by the Anchor element. Each View Container can have only one Anchor Element and each Anchor Element can only have a single View Container. Root elements of Views attached to this container become siblings of the Anchor Element in the Rendered View.

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

This leaves many open questions, such as:

主机视图是指组件所驻留的元素，而嵌入式视图是指组件的模板本身吗?

A Host View is referring to the element that Component resides in, and an Embedded view is referring to the component’s template itself?

在手动创建(通过createComponent)以及通过声明在另一个托管组件(父级)中创建时，这两种情况是否都是正确的?

Is that true for both cases when created manually (via createComponent) as well as when created declaratively via in another hosting component (parent)?

没有模板(因此没有视图)的指令也是这种情况吗?以及这一切在Shadow dom环境(浏览器实际上支持组件宿主)还是在仿真环境中如何工作?

Is that the case for Directives as well which don’t have a template (thus no view)? And how all this works in a Shadow dom environment (browser actually support a component host) vs an emulated environment?

Angular2确实发挥了很多魔力，并且为了成为专家，我希望更好地了解它，(也许通过直观的图表)以下关系的全部关系: ViewContainerRef ，主机视图，模板，嵌入式模板， ViewChild ， ViewContainer 及其组件和指令的层次结构.

Angular2 does do a lot of magic and in an effort to become an expert I wish to better understand, (maybe via a visual diagram) the entire relationship of: ViewContainerRef, Host views, Templates, Embedded Template, ViewChild, ViewContainer and their hierarchy of components and directives.

我认为自己非常精通Angular2(已经交付了2个大型项目)，但仍然觉得我对下划线内部工作方式的理解有些空洞.

I consider myself extremely well versed in Angular2 (delivered 2 huge projects already) but still feel I have holes in my understanding of the underline internal workings.

当然，您不需要知道汽车是如何驾驶的，但是如果这样做，您会更好地处理它，

Sure you don’t need to know how a car works to drive one, but you handle it much better if you do,

一如既往的感谢，

塞恩

推荐答案

有关详细信息，请阅读此文章

For in-depth information read this article Working with DOM in Angular: unexpected consequences and optimization techniques

这留下了许多悬而未决的问题，例如:主机视图所指的是 组件所在的元素，并且嵌入式"视图是 是指组件的模板本身?

This leaves many open questions, such as: a Host view is referring to the element that Component resides in, and an Embedded view is referring to the component’s template itself?

组件视图

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

Component view

Each component in Angular is represented as a view with nodes. Most nodes in the view resemble component template structure and represent DOM nodes. For example, you have a component A with the a-comp selector and the following template:

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

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

The compiler generates the following view nodes:

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

还有许多其他类型的节点，例如

There are many other types of nodes like directive data, query data etc.

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

The host view is a view that contains data for the a-comp component element and the data for the component class A. Angular compiler generates host views for each component defined in bootstrap or entryComponents of a module. And each host view is responsible for creating a component view when you call factory.createComponent. The factories that are returned by the componentFactoryResolver are the host view factories.

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

The embedded view is a view that is created for the view nodes specified in the ng-template. It's like a component view but it doesn't have a wrapper component element and component data like injector etc. Basically, it lacks the data that is contained in the host view. But it's still a valid view and is checked during detection as any other view.

在手动创建时(通过 createComponent)，以及通过其他方式以声明方式创建时 托管组件(父级)?

Is that true for both cases when created manually (via createComponent) as well as when created declaratively via in another hosting component (parent)?

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

If a component is specified in the other component template, then the host view is not used. The parent component view contains the nodes that are usually defined in the host view and this parent view is responsible for creating a child component view.

是否也没有模板的指令也是如此 (因此没有视图)?

Is that the case for Directives as well which don’t have a template (thus no view)?

对，指令没有视图，因此不会为指令创建任何视图.

Right, directives don't have a view so no views are created for directives.

这一切在Shadow dom环境中的工作原理(实际上是浏览器 支持组件宿主)还是模拟环境?

And how all this works in a Shadow dom environment (browser actually support a component host) vs an emulated environment?

每个组件都有一个渲染器，并且该渲染器知道是使用仿真DOM还是使用阴影DOM渲染.渲染器由编译器根据组件装饰器描述符的viewEncapsulation参数定义.

There's a renderer associated with each component and that renderer knows whether to use emulated or shadow DOM rendering. The renderer is defined by the compiler based on the viewEncapsulation parameter of the component decorator descriptor.

以下是我建议阅读的一些文章:

Here are some of the articles that I recommend reading:

• 探索使用ViewContainerRef的Angular DOM操作技术
• 这就是为什么你不会在Angular中查找组件
• 在Angular中DOM更新的机制
• 属性绑定机制在Angular中更新
• 您需要了解的所有信息Angular中的变化检测

• 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

这篇关于视图，主机视图和嵌入式视图之间有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！