在 angular 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 将其从父组件中删除。