Question

我想将子组件动态地附加到父组件，并使该组件位于引导网格系统内。

在有角文档（https://angular.io/guide/dynamic-component-loader）之后，我使用ViewContainerRef创建了指令，并将带有该指令的元素添加到了父模板，然后我将所有带有工厂和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>

如果容器是grid div的子代，我会得到什么：

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

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

   </div>
</div>

如果子模板以grid 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 ：所以我仍然没有找到解决方案，但是做了一个或多或少可以满足我需求的解决方法，但是看起来有点丑陋-我已经在组件宿主元素中添加了bootstrap grid类，因此它的行为就像col / row一样，现在结果看起来像：

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

UPD-3 12.04.19 ：通过查看本教程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>

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>

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

1 个答案: