角2、親から子へのコミュニケーション

Question

まずはお時間をいただきありがとうございます。

私は角2を初めて使いました。この問題を解決する方法を理解しようとしています。

コンポーネント構造：

<parent-component> 
    <dynamic-button></dynamic-button> 
    <dynamic-button></dynamic-button> 
    ... 
</parent-component> 

子コンポーネント

export class DynamicButtonComponent { 
    @Output() clicked: EventEmitter<any> = new EventEmitter<any>(); 

    loading: Boolean = false; 
    handleClick(event: any) { 
    this.loading = true; 
    this.clicked.emit(event); 
    } 
}; 

私は親にイベントを送信していますダイナミックボタンをクリックします。 'loading'変数を使用して、ボタンの横にスピナーが表示されます。 ParentがAPI呼び出しを行うと、APIコールが終了したときに、親コンポーネント（最初はイベントを送信する）から子コンポーネントに戻り、スピンナの表示を停止します。

この問題を解決するには、どのような方法が最善の方法であろうと助言してください。イベントエミッタへのコールバックがあると思ったが、これはAngular 2の原則に反していることをStackOverflowで読み取った。

Answer 1

OnChangesライフサイクルフックを使用して、進行中の子コンポーネントの@Inputアップデートをキャッチすることができます。

親：

export class ParentComponent { 
    finishedLoading: boolean = false; 
    doApiWork(){ 
     ... 
     finishedLoading = true; 
    } 
} 

が子供：

export class DynamicButtonComponent implements OnChanges{ 
    @Input() loadingDone = false; 

    ngOnChanges(){ 
     if(loadingDone){ 
      //Execute 
     } 
    } 
} 

ビューでバインド：

<parent-component> 
    <dynamic-button [loadingDone]="finishedLoading"></dynamic-button> 
    ... 
</parent-component>