Angular6 - ngIf не уничтожает объект

Question

У меня есть родительский компонент, который будет изменять дочернюю форму, которая передается как @Input() при нажатии кнопки.Я использую ngIf для визуализации дочернего компонента, но когда я нажимаю, чтобы изменить форму, дочерний компонент не уничтожается и не воссоздается.

parent.component.ts

form: FormGroup;
showChildForm: boolean;
num: number;

ngOnInit(){ 
   this.showChildForm = false; 
   this.num = 1;
   this.form = new FormGroup({group:{'name', new FormControl('name'+this.num,[])}})
}

changeForm(){
   this.num += 1;
   this.showChildForm = true; 
   this.form = new FormGroup({group:{'name', new FormControl('name'+this.num,[])}})
}

parent.component.html

<button (click)="changeForm()"></button>
<child *ngIf="showChildForm" [form]="form"></child>

child.component.ts

@Input() form: FormGroup;

child.component.html

<form [formGroup]="form">
   <input type="text" [formControl]="form.get('name')"/>
</form>

Answer 1

Внутри changeForm вы не устанавливаете this.showChildForm снова в false.

Попробуйте сделать это:

changeForm(){
  this.num += 1;
  this.showChildForm = false; 
  setTimeout(() => {
    this.showChildForm = true; 
    this.form = new FormGroup({group:{'name', new FormControl('name'+this.num,[])}})
  })
}

Надеюсь, выключите и снова включите в следующем цикле тиков.(используя setTimeout) приведет к уничтожению и воссозданию компонента.