Поместите несколько компонентов из ViewContainerRef.createComponent () в отдельные <div>с (для сетки начальной загрузки)

Question

Я хочу динамически добавлять дочерние компоненты к родительскому компоненту и иметь эти компоненты внутри системы сетки начальной загрузки.

Следуя угловым документам (https://angular.io/guide/dynamic-component-loader) Я создал директиву с ViewContainerRef и добавил элемент с этой директивой в родительский шаблон, затем я добавил все компоненты с фабрикой и ViewContainerRef createComponent ().

Общее создание компонентов работает нормально, но метод ViewCtainerRef createComponent () не дает мне возможности фактически обернуть каждый созданный компонент в некоторые угловые элементы, поскольку он не повторяет содержимое, а просто добавляет братьев и сестер.

Что я хочу:

<div class="row">
    <div class="col">

       <app-mychild></app-mychild>

   </div>
</div>

<div class="row">
    <div class="col">

       <app-mychild></app-mychild>

   </div>
</div>

---

Что я получу, если контейнер является дочерним по отношению к элементу div:

<div class="row">
    <div class="col">

       <app-mychild></app-mychild>
       <app-mychild></app-mychild>
       <app-mychild></app-mychild>

   </div>
</div>

---

Что я получу, если дочерний шаблон начинается ссетка div:

<app-mychild>
    <div class="row">
        <div class="col">
        </div>
    </div>
</app-mychild>

<app-mychild>
    <div class="row">
        <div class="col">
        </div>
    </div>
</app-mychild>

---

UPD 12.04.19 : значительно упрощен вопрос

---

UPD-2 12.04.19 : так что я все еще не нашел решения, но сделал обходной путь, который более или менее покрывает мои потребности, но выглядит довольно уродливо - я добавил класс сетки начальной загрузки прямо в элемент узла компонента, чтобы он вел себякак col / row, и теперь результат выглядит так:

<app-mychild class="row">
    <div class="col">
    </div>
</app-mychild>

Answer 1

просматривая этот урок https://codeburst.io/display-a-table-using-components-with-angular-4-f13f0971666d Я нашел более элегантное решение, которое в основном именно то, что мне нужно для достижения.Хотя это идет вразрез с https://angular.io/guide/styleguide#components-as-elements, но я полагаю, что это именно «особый случай».Страница выглядит следующим образом, реализуя решение:

<row app-mychild="" class="row">
    <div class="col">
    </div>
</row>