单击angular2中的按钮将组件添加到dom答案

【问题标题】：Add component to dom on click of button in angular2单击angular2中的按钮将组件添加到dom
【发布时间】：2019-05-13 17:28:14
【问题描述】：

我有 personInvolved 组件。该组件具有 personDetails 组件。 personInvolved 组件中有一个按钮。 Onclick 按钮我需要在 DOM 上附加 personDetails。每次我点击它都应该附加 personDetails 组件。我怎样才能做到这一点。

【问题讨论】：

标签： angular

【解决方案1】：

使用*ngFor:

    <button (click)="addPerson()">Add person</button>
    <person-details *ngFor="let person of persons" [person]="person"></person-details>

并且在组件代码中：

    persons: Array<Person> = [];

    addPerson() {
        this.persons.push(new Person());
    }

【讨论】：

这里的 personDetails 是其他具有 templateURL 的组件。我需要在 personInvolved 组件中单击 addperson 按钮时附加 personDetails 。第一次它会附加一个。下次它应该在点击时再添加一个人的详细信息..等等
这里有什么新的 Person() 方法？
如何删除或弹出 personDetails 组件中的数组。 PersonDetail 有一个名为 remove 的按钮。
person-details 组件不应该是从其父组件模型中移除自身的组件。要么将删除按钮从 person-details 组件中取出，要么让它发出一个事件（使用 EventEmitter），然后在父组件中侦听此事件，以了解删除已被单击，因此应从该组件中删除该组件数组。
我用过eventEmitter，但是如何管理要删除的索引。我可以弹出数组，但找不到单击了哪个数组。请您帮帮我