В чем разница между представлением, представлением хоста и встроенным представлением

Чтобы получить более глубокие знания в Angular 2, я хотел бы, чтобы кто-то создал подробное объяснение/учебное пособие по базовой структуре компонентов, директив и их контейнеров и представлений.

В соответствии с документами:

Контейнер компонентов может содержать два вида представлений. Просмотров хоста, созданный путем создания экземпляра компонента через createComponent и Embedded Представления, созданные путем создания экземпляра встроенного шаблона через createEmbeddedView. Расположение контейнера View внутри содержащий View, задается элементом Anchor. Каждый вид Контейнер может иметь только один элемент привязки, и каждый элемент анкера может есть только один контейнер просмотра. Корневые элементы представлений, прилагаемых к этот контейнер становится братьями и сестрами Якорного элемента в визуализированном Просмотр.

Это оставляет много открытых вопросов, таких как:

A Просмотр хоста относится к элементу, в котором находится компонент, а встроенное представление относится к самому шаблону компонентов?

Это верно для обоих случаев при создании вручную (через createComponent), а также при создании декларативно через другой хостинг-компонент (родительский)?

Это также относится к директивам, у которых нет шаблона (таким образом, нет представления)? И как все это работает в среде Shadow dom (браузер фактически поддерживает компонентный хост) против эмулируемой среды?

Angular2 делает много магии и, пытаясь стать экспертом, я хочу лучше понять (возможно, через визуальную диаграмму) все отношения: ViewContainerRef, Просмотры хоста Шаблоны Встроенный шаблон, ViewChild, ViewContainer и их иерархия компонентов и директив.

Я считаю, что я очень хорошо разбираюсь в Angular2 (уже поставил 2 огромных проекта), но все же чувствую, что у меня есть дыры в моем понимании подчеркивания внутренней работы.

Конечно, вам не нужно знать, как работает автомобиль, чтобы управлять им, но вы справляетесь с этим гораздо лучше, если вы это делаете,

Спасибо, как всегда,

Шон

Ответ 1

Это оставляет много открытых вопросов, таких как: представление хоста относится к элемент, в котором находится компонент, и встроенное представление ссылаясь на сам шаблон компонентов?

Вид компонентов

Каждый компонент в 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}} ])

Существует множество других типов узлов, таких как директивные данные, данные запроса и т.д.

Хост

Представление хоста представляет собой представление, содержащее данные для элемента компонента a-comp и данные для класса компонента A. Компилятор Angular генерирует представления хостов для каждого компонента, определенного в bootstrap или entryComponents модуля. И каждое представление узла отвечает за создание представления компонента при вызове factory.createComponent. Заводы, которые возвращаются componentFactoryResolver, являются заставками хоста.

Встроенное представление

Встроенный вид - это представление, созданное для узлов представления, указанных в ng-template. Это похоже на компонентный вид, но в нем нет элемента компонента-оболочки и данных компонента, таких как инжектор и т.д. В основном ему не хватает данных, которые содержатся в представлении хоста. Но это все еще действительный вид и проверяется во время обнаружения как любое другое представление.

Это верно для обоих случаев при создании вручную (через createComponent), а также при создании декларативно через другое хост-компонент (родительский)?

Если компонент указан в другом шаблоне компонента, представление хоста не используется. Представление родительского компонента содержит узлы, которые обычно определяются в представлении хоста, и это родительское представление отвечает за создание представления дочерних компонентов.

Это также относится к директивам, у которых нет шаблона (таким образом, нет представления)?

Вправо, директивы не имеют представления, поэтому для директив не создаются представления.

И как все это работает в среде Shadow dom (браузер фактически поддержка узла компонента) против эмулируемой среды?

Существует средство визуализации, связанное с каждым компонентом, и что rendrerer знает, использовать ли эмулированный или теневой рендеринг DOM. Средство визуализации определяется компилятором на основе параметра viewEncapsulation дескриптора декоратора компонента.

Вот некоторые из статей, которые я рекомендую читать: