Angular2：在行/列位置动态注入组件答案

【问题标题】：Angular2: Dynamically inject component at row/column locationAngular2：在行/列位置动态注入组件
【发布时间】：2017-08-12 07:09:29
【问题描述】：

我的 Angular2 应用程序包含多个动态组件。我能够创建所有这些动态组件并使用 ComponentFactoryResolver 将它们加载到页面上。但问题是我想以行/列的方式显示它们。我知道我创建的动态组件的行和列位置。所以我应该在那个我无法实现的特定位置注入这个组件。

我正在创建如下动态组件。这里的内容是锚点。我正在将我所有的动态组件添加到此内容中。因此，所有动态创建的组件都显示在另一个下方。但我的要求是以行/列方式显示所有这些动态组件。我知道我的动态组件的行/列数。

const factory = this.componentFactoryResolver.resolveComponentFactory(DonutComponent);
const ref = this.content.createComponent(factory);
 ref.instance.donutchartData = this.donughtChartData;     
ref.changeDetectorRef.detectChanges();

【问题讨论】：

创建一个二维数组，以行/列的方式将它们全部放入其中并渲染它们？
组件动态创建，组件数量由API驱动。
stackoverflow.com/questions/36325212/… 中所示的包装函数可能会有所帮助。
无论 api 返回多少组件，将它们除以 2 将它们放入具有两个循环的数组中
但是我需要将数据绑定到这些组件。任何示例代码都非常感谢。

标签： angular angular2-template angular2-directives

【解决方案1】：

你在这里没有给我们很多信息。您是否有一些代码可以显示您要完成的工作的详细信息？ @BabarBilal 建议将数据放在二维数组中，然后您可以在视图中使用 *ngFor 来迭代二维数组的行/列。

data: string[][];


<tr *ngFor="let row of data">
    <td *ngFor="let col of row">
        {{ col.property }}
    </td>
</tr>

【讨论】：

我已经用我如何创建动态组件的信息更新了问题，但无法按照我的要求添加到 DOM（行/列方式）
我的组件采用这种方式，并且具有已知的列和行位置。如何以行/列方式动态显示它们 {"componentname": C3, "val": "1", "col":0, "row":0 }, {"componentname": C1, "val":" 2", "col":0, "row":1 } ];
我建议遍历这些组件并将它们放在一个二维数组中，然后使用 *ngFor 在视图中显示。

【解决方案2】：

IMO，您可以创建一个组件来满足单元格上的块。然后，该组件将使用您尝试注入的其余组件。您需要做的只是设置稍微不同的条件，以便 Angular 负责根据需求加载和卸载组件。

我在我的项目中实现了类似的功能，左侧组件上的选择和操作决定了十几个组件中的哪一个将显示在右侧的 4 个部分中。我只是使用ngIf 来控制哪个组件会出现。希望这会有所帮助。

如果这不是答案，那么我想了解您为什么要按照代码示例中显示的方式动态创建它们？

【讨论】：