带索引的Angular2动态组件

我有一个角度的应用程序，所有密集的目的是订单垫

有一个订单输入组件，它有两个子项（例如：

|-order_entry.component.ts//选择器
-name\u component.ts//选择器
-Quantity_component.ts//选择器

现在，当我的应用程序第一次启动时，没有加载order_entry.component.ts的实例，我有一个按钮，单击该按钮应该加载该组件的第一个实例（带有索引，以便我可以引用它）

因此，当请求order_entry.component.ts的新实例时，它会使用以下新实例更新我的HTML：

<orderentry_line></orderentry_line>

这反过来又创造了：

<name></name>
<qty></qty>

这将创造出以下内容：

<!-- index is the component number generated in order -->
<input type=text name="name_entry" (ngModelChange)="storeNameValue($index, $event)">
<input type=text name="qty_required" (ngModelChange)="storeQtyValue($index, $event)">

因此1将是索引（对于加载的第一个组件），因此order_entry组件的多个实例可以协调工作

此外，如果需要，我需要能够删除某些组件，因此假设我创建了4个实例，我需要能够在用户操作中删除/删除一个组件

到目前为止，我已经从中改编了一些代码，其中显示了创建一个组件的多个实例，但我似乎无法正确地更新索引值（我想象我可以使用全局流服务来存储该值并转发它），但我不确定这是否是实现这一点的正确方法（基于我的用例）

---

我已经看过了，它是有帮助的，但它并没有延伸到我想要实现的目标

只需维护阵列中的组件：

export default class DynamicComponent {
  components = [];

  delete(i:number) {
    this.components[i].destroy();
    this.components.splice(i, 1);
  }

  @Input set componentData(...) {
    ...
    this.components.push(component);
  }

{{c.instance.c}}-{c}
删除

---

谢谢Gunter，这正是我想要的。嗨，Gunter，我如何从内部调用delete component函数，这是我试图实现的一个粗略示例：我是否能最好地将DynamicComponent变成一项服务？我不明白为什么？您的理由是什么？目前的简单修复方法似乎是：“component.instance['dynamic']=this；”再次感谢您的帮助。

export default class DynamicComponent {
  components = [];

  delete(i:number) {
    this.components[i].destroy();
    this.components.splice(i, 1);
  }

  @Input set componentData(...) {
    ...
    this.components.push(component);
  }

<div *ngFor="let c of components, let i=index">
  {{c.instance.c}} - {{c}} 
  <button (click)="delete(i)">delete</button>
</div>