在 Angular 11 中动态生成/生成现有组件

Question

我正在做一个 Web 应用程序，它应该像我们手机中的联系人应用程序一样工作：

1. 注册联系信息（姓名、电子邮件、电话号码）
2. 点击保存按钮
3. 列表立即更新（这是我的问题）

所以我有一个 list.component（灰色垫卡）和一个 contact.component（橙色垫卡）。

我想在 list.component 中生成一个新的 contact.component，并在用户选择删除按钮时将其销毁。

数据顺利通过，但我不知道如何在另一个现有组件中添加新的现有组件。

Answer 1

您可以将联系人保存在公共数组中，然后在列表组件中对其进行迭代：

  <list-component>
<ng-container *ngFor="let contact of contactArray"> 
<contact-component></contact-component>
 </ng-container>
</list-component>

当用户添加另一个联系人时，你可以将其推送到contactArray，就会出现额外的contact-component