Question

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

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

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

Answer 1

您还没有在这里向我们提供大量信息。您是否有一些代码可以显示您要完成的内容的详细信息？ @BabarBilal建议将数据放在二维数组中，然后在视图中使用* ngFor来迭代二维数组的行/列。

data: string[][];


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

Answer 2

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

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

如果这不是答案，那么我想了解为什么要动态创建它们，就像在代码示例中显示的那样？

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

2 个答案: