Angular2 DynamicContentLoader 将元素插入到目标容器的顶部

Posted 2023-03-16

【中文标题】Angular2 DynamicContentLoader 将元素插入到目标容器的顶部

【英文标题】：Angular2 DynamicContentLoader inserting element to top of the target container

【发布时间】：2016-08-17 23:08:40

【问题描述】：

这三个 loadXXX() 方法似乎只是将动态组件放到目标容器中。如果我的容器里面已经有组件，我如何将新组件放在现有组件的顶部？ （见下面的例子）

例如

<table>
  <tr><td>Existing Row</td></tr>
  <tr><td>Existing Row</td></tr>
</table>

我想要什么：

<table>
  <tr><td>!!! Insert Here !!!!</td></tr>
  <tr><td>Existing Row</td></tr>
  <tr><td>Existing Row</td></tr>
</table>

行是我这里的组件

【问题讨论】：

我不完全理解这个问题。您要插入<tr>...</tr> 行还是要在<td>...</td> 内插入组件？

我想插入一个组件。示例 html 仅用于演示我要插入的位置。

【参考方案1】：

这不是一个直接的解决方案，但它可能对你有用

您可以像Angular 2 dynamic tabs with user-click chosen components 中解释的那样使用包装器元素，并像使用它一样

<table>
  <tr dcl-wrapper *ngFor="let type of types" [type]="type"><td></td></tr>
  <tr><td>Existing Row</td></tr>
  <tr><td>Existing Row</td></tr>
</table>

在组件中有一个字段，该字段包含对要插入的组件的引用

class MyComponent 
  types = [MyCmp1, MyCmp2, MyCmp3];

这样，types 数组中组件的顺序定义了组件的插入位置。