时间戳

首页 > 解决方案 > 如何在按钮单击时多次创建现有组件 - Angular

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

问题描述

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

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

我应该使用组件工厂还是只使用普通的 forLoop？

HTML - 子组件

<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");
}

标签： angularangular-components

解决方案

这个想法

使用 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注意到这一点并呈现另一个项目。

推荐阅读