Angular 8で子コンポーネントのみを再読み込みまたは更新する方法

Question

2つのコンポーネント、1つの親と他の子があります。

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>

さて、このボタンをクリックすると、私は唯一の子にリロードまたはリフレッシュを取得します。

TSパート

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

インターネットで検索したところ、VueまたはReact、Angularではありません。

Answer 1

*ngIfおよびsetTimeoutを使用して、子コンポーネントを変更せずに、子コンポーネントを親からリセットすることもできます。

。テンプレート：

.ts：

show:boolean = true

resetChildForm(){
   this.show = false;

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

これは、サードパーティのライブラリコンポーネントなど、子コンポーネントを制御できない場合に特に役立ちます。