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.
As per the docs:
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?
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?
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.
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,
Thanks as always,
Sean
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…