Comment recharger ou actualiser uniquement le composant enfant dans Angular 8

Question

J'ai deux composantes, un parent et un autre enfant.

Partie HTML

<div>
  <div class="row col-md-12">
    <div class="col-md-4">
       <!-- Some HTML Code of Parent component over here -->
    </div>
    <div class="col-md-8">
      <child-component></child-component>
    </div>
 </div>
 <button class="button" (click)="reloadOnlyChild($event)">Reload Child</button>
</div>

Maintenant, en cliquant sur ce bouton, je veux que le seul enfant soit rechargé ou actualisé.

TS Part

reloadOnlyChild(event){
  // I want to reload the child from here.
}

J'ai cherché sur Internet, j'obtiens Vue ou React, mais pas Angular.

Answer 1

Nous pouvons également utiliser *ngIf et setTimeout pour réinitialiser le composant enfant à partir du parent sans apporter aucune modification au composant enfant.

.modèle:

.ts:

show:boolean = true

resetChildForm(){
   this.show = false;

   setTimeout(() => {
      this.show = true
    }, 100);
}

Cela est particulièrement utile lorsque nous n'avons aucun contrôle sur le composant enfant, comme un composant de bibliothèque tiers.