角度如何动态添加组件列表

Posted 2023-03-13

【中文标题】角度如何动态添加组件列表

【英文标题】：angular how to dynamically add a list of components

【发布时间】：2020-04-05 17:21:41

【问题描述】：

所以基本上我有一个按钮，让我可以选择添加一个包含 2 个输入的组件。他们的用户可以多次添加这个组件。但我尝试了ComponentFactoryResolver，但它当时只能添加一个组件。

当我按下添加合同时，我将创建一个包含输入字段和标签的卡片组件

【问题讨论】：

请提供***.com/help/minimal-reproducible-example

您可以使用 ngFor 并将新项目推送到可迭代对象

它是一个组件，我猜你可以用 ngfor 推送组件

【参考方案1】：

使用*ngFor 循环显示一个模型，然后显示孩子

鉴于您想要实现的功能，您需要在已经提到的 cmets 中，在 TS 文件中使用 *ngFor 循环遍历 html 模板中的模型。将其与子组件结合使用，您可以通过单击按钮轻松添加这些组件

TS 家长

import  Component  from '@angular/core';

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
)
export class AppComponent  
  name = 'Angular';
  // specifies the input data
  inputs = []

  addInput() 
    // Here you can specify the data
    this.inputs.push();
  

HTML 父级

<button (click)="addInput()">Add Input</button>
<app-child *ngFor="let input of inputs"></app-child>

HTML 孩子

<p> Input: </p>
<input type="text">

要指定您的子组件，您可以使用@Input() 装饰器。如果您想显示不同的表单或不同的元素，您可以在那里将input 中的数据传递给孩子。

供您参考：https://stackblitz.com/edit/angular-hrdtcu

【讨论】：

我尝试使用这种方法，但让我们说一下我如何跟踪每个组件以及他做了什么。在我的情况下，我添加了 5 个文本字段，我需要一起验证它们如何做到这一点

那么您也许应该使用可以迭代的表单数组创建一个反应式表单。然后这个表单有一个跨字段验证，可以一起验证它们

@Mohamed hassan kadri 这超出了范围。

但是你可以使用响应式表单