To get deeper knowledge in Angular 2, I would like someone to create a detailed explanation / tutorial on the basic structure of components, directives, and their containers and views.
In accordance with the documents:
A component container can contain two kinds of views. Host views created by instantiating a component through createComponent and Embedded Views created by instantiating an inline template through createEmbeddedView. The location of the View container inside containing the View is set by the Anchor element. Each view A container can have only one anchor element, and each anchor element can have only one view container. The root elements of the views attached to this container become the siblings of the Anchor element in the rendered View.
This leaves a lot of open questions, such as:
A host view refers to the element in which the component is located, and the inline view refers to the component template itself?
Is this true for both cases when creating manually (via createComponent), as well as when creating declaratively through another hosting component (parent)?
Does this also apply to directives that have no template (thus no representation)? And how does all this work in the Shadow dom environment (the browser actually supports the component host) against the emulated environment?
Angular2 does a lot of magic and, trying to become an expert, I want to better understand (possibly through a visual diagram) all relationships: ViewContainerRef , Host Views Templates Built-in template , ViewChild , ViewContainer and their hierarchy of components and directives.
, Angular2 ( 2 ), , .
, , , , , ,
, ,