在角度8中动态添加嵌套组件

Question

我正在构建一个angular 8应用程序。我有一个嵌套的组件，我想在单击父组件上的按钮时将其动态添加到父组件上。如下所示：

添加按钮应将组件添加到父组件上。关闭按钮应从父组件中删除嵌套组件。此外，我希望在父组件和嵌套组件之间进行通信，方法是单击嵌套组件上的某些控件，例如单击“添加学生”按钮等。到目前为止，我已经能够创建一个嵌套组件并将其添加到父组件上（不动态）。

请在下面找到代码：

add-student.component.html

<div class="col-lg-3 col-md-12">
  <div style="float: right;">
    <button type="button" class="close" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <button type="button" class="btn btn-primary">Add Student</button>
  </div>

我知道我可以使用jquery动态添加div并实现此目的。但是如何使用angular来实现呢？有没有更好，更轻松的方法来完成此任务？

谢谢

Answer 1

以这种角度思考，您有一个学生列表，并且想要添加和删除他们。组件是数据的表示。

正在说你需要这样做

在父组件中

students: Array<Student> = [];

addStudent() {
 this.students = [...this.students, new Student()];
}

onRemoveStudent(student: Student) {
  const index = this.students.findIndex(student);
  if (index !== -1) {
     this.students.splice(index,1);
  }
}

<div *ngFor="let student of students">
  <app-student [student]="student" (remove)="onRemoveStudent($event)"></app-student>
</div>

在学生部分

@Input() student: Student;
@Output() remove: EventEmittrer<Student> = new EventEmittrer<Student>();

onRemoveButtonClick() {
  this.remove.emit(this.student);
}

Answer 2

您可以通过执行类似的操作

<button (click)="addComponent()"> ADD </button>
<div id="student-components">
   <student-list *ngFor="let component of components" [identifier]="component">

   </student-list>
</div>

components: string[] = [];
addComponent() {
   var id = ""; //generate something like Guid.NewGuid()
   this.components.push(id);
}

，并且在add-student.component中，您可以使用ID将其从父组件中删除。