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