如何在单击按钮时多次创建现有组件-Angular

Question

我试图多次单击按钮来创建组件。该按钮位于父组件中，当单击“添加更多”时，它将创建子组件的次数与单击“添加更多”的次数相同。默认情况下，仅显示一个子组件，然后当我们单击按钮时，将在现有组件之后添加相同的子组件。

如何在单击按钮时多次创建现有子组件？

我应该使用组件Factory还是仅使用普通的Loop？

HTML -Child组件

<input type="text />

HTML-父组件

<child-component #childCom></child-component>

<button (click)="addMore()">Add more</button>

TS

@ViewChild('childCom') childCom: ElementRef;

addMore(){
     console.log("child component");
}

Answer 1

想法

使用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>

流程

当用户单击按钮时，将调用方法add。这使数组的长度增加一倍。 ngFor注意到这一点并呈现另一个项目。

Answer 2

为此使用ComponentFactoryResolver

将results.withColumn('pred_class',round(results['prediction'])) 添加到您要在其中生成动态组件的HTML页面中

ng-template

然后在您的component.ts中

<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