我有一个有角度的应用程序，用于所有集中用途的订单。
有一个订单输入组件，其中有两个子对象（出于示例目的）：
|-order_entry.component.ts // selector <orderentry_line></orderentry_line>
-name_component.ts // selector <name></name>
-quanity_component.ts // selector <qty></qty>
现在，当我的应用程序首次启动时，没有加载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);
}
<div *ngFor="let c of components, let i=index">
{{c.instance.c}} - {{c}}
<button (click)="delete(i)">delete</button>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句