这个主意

使用for循环多次显示组件。

阵列

每次您要添加一个新项时,我们都会将另一项添加到数组中(例如,数组可以是 0 , 1 2 或者你可以保留一些状态——这取决于你的应用程序)。

public items = []

public add () {
  this.items = [...this.items, this.items.length]
}

模板

add 方法。

<button (click)="add()">Add</button>

<child-component *ngFor="let item of items"></child-component>

流动

当用户单击按钮时,方法 添加 被称为。这将使数组的长度增加1。 ngFor 注意到这一点并呈现另一项。

使用 ComponentFactoryResolver 为了这个

添加 ng-template 在HTML页面中生成动态组件

<child-component #childCom></child-component>
<ng-template #container></ng-template>

@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
input = InputComponent;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {

  }

InputComponent 子组件是否符合您的代码

add() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.input);
    const component = this.container.createComponent(componentFactory);
  }

别忘了在中引导您的子组件 NgModule

bootstrap: [AppComponent], entryComponents: [InputComponent]