时间戳

首页 > 解决方案 > 在 Angular 11 中动态生成/生成现有组件

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

问题描述

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

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

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

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

数据传递良好，但我不知道如何在另一个组件中添加新的现有组件。

标签： htmlangulartypescriptangular9angular2-components

解决方案

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

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

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

推荐阅读