Angular2:在 row/column 位置动态注入组件
Angular2: Dynamically inject component at row/column location
我的 Angular2 应用程序包含多个动态组件。我能够创建所有这些动态组件并使用 ComponentFactoryResolver 将它们加载到页面上。但问题是我想以 row/column 的方式显示它们。我知道我创建的动态组件的行和列位置。所以我应该在那个特定位置注入这个组件,这是我无法实现的。
我正在创建如下动态组件。这里的内容是锚点。
我正在将我所有的动态组件添加到此内容中。因此所有动态创建的组件都显示在另一个下方。但我的要求是以 row/column 方式显示所有这些动态组件。我知道我的动态组件的 row/column 编号。
const factory = this.componentFactoryResolver.resolveComponentFactory(DonutComponent);
const ref = this.content.createComponent(factory);
ref.instance.donutchartData = this.donughtChartData;
ref.changeDetectorRef.detectChanges();
你在这里没有给我们很多信息。您是否有一些代码可以显示您要完成的工作的详细信息? @BabarBilal 建议将数据放在二维数组中,然后您可以在视图中使用 *ngFor 来迭代二维数组的 rows/cols。
data: string[][];
<tr *ngFor="let row of data">
<td *ngFor="let col of row">
{{ col.property }}
</td>
</tr>
IMO,您可以创建一个组件来满足单元格上的块。然后该组件将使用您尝试注入的其余组件。您需要做的就是设置稍微不同的条件,以便 Angular 负责根据要求加载和卸载组件。
我在我的项目中取得了类似的成就,其中左侧组件上的选择和操作决定了十几个组件中的哪些将显示在右侧的 4 个部分中。我只是使用 ngIf
来控制哪个组件出现。
希望这有帮助。
如果这不是答案,那么我想了解您为什么要动态创建它们,就像您在代码示例中显示的那样?
我的 Angular2 应用程序包含多个动态组件。我能够创建所有这些动态组件并使用 ComponentFactoryResolver 将它们加载到页面上。但问题是我想以 row/column 的方式显示它们。我知道我创建的动态组件的行和列位置。所以我应该在那个特定位置注入这个组件,这是我无法实现的。
我正在创建如下动态组件。这里的内容是锚点。 我正在将我所有的动态组件添加到此内容中。因此所有动态创建的组件都显示在另一个下方。但我的要求是以 row/column 方式显示所有这些动态组件。我知道我的动态组件的 row/column 编号。
const factory = this.componentFactoryResolver.resolveComponentFactory(DonutComponent);
const ref = this.content.createComponent(factory);
ref.instance.donutchartData = this.donughtChartData;
ref.changeDetectorRef.detectChanges();
你在这里没有给我们很多信息。您是否有一些代码可以显示您要完成的工作的详细信息? @BabarBilal 建议将数据放在二维数组中,然后您可以在视图中使用 *ngFor 来迭代二维数组的 rows/cols。
data: string[][];
<tr *ngFor="let row of data">
<td *ngFor="let col of row">
{{ col.property }}
</td>
</tr>
IMO,您可以创建一个组件来满足单元格上的块。然后该组件将使用您尝试注入的其余组件。您需要做的就是设置稍微不同的条件,以便 Angular 负责根据要求加载和卸载组件。
我在我的项目中取得了类似的成就,其中左侧组件上的选择和操作决定了十几个组件中的哪些将显示在右侧的 4 个部分中。我只是使用 ngIf
来控制哪个组件出现。
希望这有帮助。
如果这不是答案,那么我想了解您为什么要动态创建它们,就像您在代码示例中显示的那样?