angular如何动态添加组件列表

Question

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

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

Answer 1

使用*ngFor遍历一个模型，该模型随后显示子项

从您要实现的功能出发，您需要像已经提到的注释一样，在TS文件中建立模型，该文件将在HTML模板中使用*ngFor进行循环。将其与子组件结合使用，您可以轻松地添加这些组件，例如单击按钮

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