角度2，孩子與父母之間以及與孩子之間的溝通

Question

首先感謝您的寶貴時間。

我是Angular 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'變量將在按鈕旁邊顯示一個微調框。 然后，父級進行API調用，當API調用完成后，我想從父級（最初發送事件）將道具發送回子級組件，以停止顯示微調器。

請告知什么是解決此問題的最好/最干凈的方法。 我曾想過要回調事件發射器，但我在StackOverflow中讀到它違反了Angular 2的原理

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>