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

Question

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

e.g。

<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>

• row是我的组件

Answer 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数组中组件的顺序定义了组件的插入位置。