Angular 将ViewContainerRef.createComponent（）中的多个组件放在单独的s中（用于引导网格）

我想动态地将子组件附加到父组件，并将这些组件放在引导网格系统中

接下来，我使用ViewContainerRef创建了指令，并将该指令中的元素添加到父模板中，然后使用factory和ViewContainerRef createComponent添加了所有组件

总体而言，创建组件工作正常，但ViewContainerRef的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>

如果container是grid div的子级，我会得到什么：

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

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

   </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>

如果子模板以grid div开头，我会得到什么：

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

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

   </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>

---

通过阅读本教程，我发现了更优雅的解决方案，这基本上正是我需要实现的。虽然这违背了风格指南，但我想这正是特例。实现解决方案的页面如下所示：

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

---

你提到这个链接了吗？我没有看到，但它看起来很相关。如果它真的解决了这个问题，并且可以适用于angular 7，我会看一看并更新线程，感谢您挖掘了这个upso，显然在仔细查看之后，大多数解决方案都建议使用jquery或直接DOM操作，ng团队不鼓励这样做。我正在寻找更直接的方法，使用ViewContainer=在今天的问题调查之后缩小问题范围