在 Angular 11 中動態生成/生成現有組件

Question

我正在做一個 web 應用程序，它應該像我們手機中的聯系人應用程序一樣工作：

1. 注冊聯系方式（姓名、email、號碼）
2. 點擊保存按鈕
3. 列表立即更新（這是我的問題）

所以我有一個list.component （一張灰色墊卡）和一個contact.component （一張橙色墊卡）。

我想在list.component中生成一個新的contact.component ，並在用戶 select 刪除按鈕時將其銷毀。

數據傳遞良好，但我不知道如何在另一個組件中添加新的現有組件。

Answer 1

您可以將聯系人保存在公共數組中，然后在列表組件中對其進行迭代：

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

當用戶添加另一個聯系人時，您可以將其推送到contactArray，並且會出現額外的contact-component