angular – 视图,主机视图和嵌入视图之间的区别

发布时间：2020-12-17 07:54:48 所属栏目：安全来源：网络整理

导读：为了更深入地了解Angular 2,我希望有人能够对组件,指令及其容器和视图的底层结构进行深入的解释/教程. 根据文档： The component’s container can contain two kinds of Views. Host Views, created by instantiating a Component via createComponent,and

为了更深入地了解Angular 2,我希望有人能够对组件,指令及其容器和视图的底层结构进行深入的解释/教程.

根据文档：

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.

这留下了许多未解决的问题,例如：

主机视图是指Component所在的元素,而Embedded视图是指组件的模板本身？

对于手动创建(通过createComponent)以及通过另一个托管组件(父级)以声明方式创建的两种情况都是如此吗？

指令也是如此,它没有模板(因此没有视图)？以及所有这些在Shadow dom环境(浏览器实际上是否支持组件主机)和模拟环境中如何工作？

Angular2确实做了很多魔术,并且为了成为一名专家,我希望更好地理解(可能通过可视化图表)整个关系：ViewContainerRef,主机视图,模板,嵌入式模板,ViewChild,ViewContainer及其层次结构组件和指令.

我认为自己非常精通Angular2(已经完成了2个大型项目)但仍然觉得我对下划线内部工作的理解存在漏洞.

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

一如既往地谢谢,

肖恩

有关详细信息,请阅读本文 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和以下模板：

<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中指定的视图节点创建的视图.它就像一个组件视图,但它没有包装器组件元素和组件数据,如注入器等.基本上它缺少主机视图中包含的数据.但它仍然是一个有效的视图,并在检测过程中检查任何其他视图.

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

如果在其他组件模板中指定了组件,则不使用主机视图.父组件视图包含通常在主机视图中定义的节点,此父视图负责创建子组件视图.

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?

有一个与每个组件关联的渲染器,该渲染器知道是否使用模拟或阴影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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!