динамически добавлять вложенные компоненты в angular 8 - PullRequest
Новая
       6

динамически добавлять вложенные компоненты в angular 8

1 голос
/ 19 марта 2020

Я создаю angular 8 приложение. У меня есть вложенный компонент, который я хотел бы динамически добавить на родительский компонент при нажатии кнопки на родительском компоненте. Пример примерно так: enter image description here

Кнопка ADD должна добавить компонент в родительский компонент. Кнопка закрытия должна удалить вложенный компонент из родительского компонента. Кроме того, я хотел бы, чтобы связь между родительским и вложенным компонентами происходила при нажатии некоторых элементов управления на вложенном компоненте, например при нажатии кнопки «Добавить учащегося» и т. Д. c. До сих пор я смог создать вложенный компонент и добавить его в родительский компонент (не Dynami c).

Пожалуйста, найдите код ниже:

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? Есть ли лучший и более простой способ выполнить sh это?

Спасибо

Ответы [ 2 ]

1 голос
/ 19 марта 2020

В angular думайте так, у вас есть список студентов, и вы хотите добавить и удалить их. компоненты представления данных.

Как говорится, вам нужно сделать это

в родительском компоненте 

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);
}
0 голосов
/ 19 марта 2020

Вы можете добиться этого, выполнив что-то вроде 

<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 вы можете использовать идентификатор, чтобы удалить его из родительского компонента.

...